/* Public About page, scoped away from the application and other landing pages. */
.ab-page { --ab-ink: #061b39; --ab-blue: #0079ff; color: var(--ab-ink); background: #f9fcff; overflow: clip; }
.ab-page .shell { width: min(1320px,calc(100% - 64px)); }
.ab-page svg { display: block; }
.ab-page h1,.ab-page h2,.ab-page h3 { font-weight: 780; }
.ab-page a:focus-visible { outline: 3px solid #269eff; outline-offset: 5px; }
.main-nav a[href="/over-ons"] { color: #fff; border-radius: 8px; padding-inline: 13px; margin-inline: -13px; background: linear-gradient(130deg,#008cff,#0053ff); box-shadow: 0 0 18px #008cff55; }
.ab-eyebrow { color: #0068ff; font-size: .77rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 13px; }
.ab-button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 56px; padding: 15px 25px; border: 1px solid transparent; border-radius: 13px; font-weight: 700; font-size: .94rem; line-height: 1.35; transition: transform .2s,box-shadow .2s,background .2s; }.ab-button:hover { transform: translateY(-2px); }
.ab-primary { color: #fff; border-color: #00baff; background: linear-gradient(110deg,#00b7fa,#0052ff 82%); box-shadow: 0 0 24px #058dff77,inset 0 1px 7px #c4f8ff44; }.ab-primary:hover { box-shadow: 0 5px 30px #058dff99,inset 0 1px 7px #c4f8ff44; }
.ab-outline { background: #031a32c4; border-color: #20bfff; color: #fff; box-shadow: inset 0 0 0 3px #158ad719; }.ab-outline:hover { background: #0d3657; }
.ab-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 30px; margin-top: 34px; }
.ab-more { display: inline-flex; gap: 10px; align-items: center; font-size: .92rem; font-weight: 650; text-decoration: underline; text-decoration-color: #7daed177; text-underline-offset: 5px; }.ab-more > span { color: #00b8ff; font-size: 1.3rem; }.ab-more:hover { color: #7fdaff; }
.ab-hand { font-family: var(--w-hand); font-style: italic; line-height: 1.3; transform: rotate(-8deg); }.ab-hand svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

.ab-hero { position: relative; isolation: isolate; background: #01192e; color: #fff; padding: 35px 0 87px; }
.ab-hero-image { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.ab-hero::before { content: ""; position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg,#01172eee,#01192edf 35%,#001c354d 55%,transparent 84%),linear-gradient(0deg,#001c3b88,transparent 40%); }
.ab-hero-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 17px; align-items: center; }
.ab-hero-copy { position: relative; z-index: 3; padding: 24px 0 10px 18px; }
.ab-hero .ab-eyebrow { color: #03c6ff; margin-bottom: 19px; }.ab-hero h1 { font-size: clamp(2.8rem,4.65vw,4.6rem); line-height: 1.02; letter-spacing: -.048em; margin-bottom: 23px; }.ab-hero h1 > span { color: #00b5ff; }
.ab-lead { color: #ecf3fc; font-size: 1.03rem; line-height: 1.62; max-width: 48ch; margin-bottom: 36px; }
.ab-pillars { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 21px; margin: 0; padding: 0; list-style: none; }.ab-pillars li { position: relative; }.ab-pillars li:not(:last-child)::after { content: ""; position: absolute; top: 32px; right: -7px; width: 24%; height: 1px; background: linear-gradient(90deg,#0c70b980,transparent); }.ab-pillars i { display: grid; place-items: center; width: 65px; height: 65px; color: #fff; border: 1px solid #1cc3ff; border-radius: 17px; background: linear-gradient(140deg,#00b9ff,#0050ff); box-shadow: 0 0 25px #0088ff55,inset 0 1px 5px #fff6; margin-bottom: 15px; }.ab-pillars svg { width: 36px; height: 36px; }.ab-pillars strong { display: block; font-size: 1.11rem; margin-bottom: 6px; }.ab-pillars p { color: #dcebf9; font-size: .94rem; line-height: 1.5; margin: 0; }
.ab-hero-art { position: relative; min-width: 0; min-height: 640px; align-self: stretch; z-index: 2; }
.ab-art-note { position: absolute; top: 0; left: 10%; color: #e1f3ff; font-size: 1.3rem; text-align: center; text-shadow: 0 1px 9px #01182e; z-index: 2; }.ab-art-note svg { width: 63px; height: 56px; margin-left: 92px; }.ab-art-note-right { position: absolute; top: 4%; right: -1%; font-size: 1.18rem; color: #e0f1fc; text-align: center; text-shadow: 0 1px 9px #01182e; }.ab-art-note-right svg { width: 63px; height: 52px; }
.ab-wave { position: absolute; left: 0; bottom: -1px; width: 100%; height: 76px; z-index: 1; pointer-events: none; }

.ab-story { position: relative; padding: 49px 0 28px; background: linear-gradient(150deg,#f9fcff,#fff 50%,#eaf5ff); scroll-margin-top: 95px; }
.ab-story-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 82px; padding-inline: 20px; align-items: start; }
.ab-story h2 { font-size: clamp(2.4rem,3.7vw,3.3rem); line-height: 1.08; letter-spacing: -.044em; max-width: 14ch; margin: 0; }.ab-story h2 > span { color: #008aff; }
.ab-story-copy { padding-top: 7px; }.ab-story-copy > p { font-size: 1rem; line-height: 1.62; color: #25476f; margin-bottom: 18px; }
.ab-principle { display: flex; align-items: center; gap: 17px; padding: 18px 21px; border-radius: 17px; background: linear-gradient(115deg,#e8f4ff,#e5f1ff); }.ab-quote { align-self: start; font-family: Georgia,serif; color: #007bff; font-size: 3.7rem; line-height: 1; height: 37px; }.ab-principle > p { flex: 1; font-style: italic; font-size: .93rem; line-height: 1.55; margin: 0; color: #09284e; }.ab-principle-brand { display: flex; align-items: center; gap: 11px; border-left: 1px solid #c6def4; padding-left: 18px; }.ab-principle-brand img { width: 43px; height: auto; }.ab-principle-brand span { color: #34577e; font-size: .7rem; line-height: 1.5; white-space: nowrap; }.ab-principle-brand strong { display: block; color: #0a2a52; font-size: .76rem; }
.ab-values { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 25px; margin-top: 33px; padding-inline: 17px; }.ab-values article { position: relative; display: flex; gap: 31px; min-width: 0; padding: 23px 31px 27px 25px; border: 1px solid #c7ddfb; border-radius: 20px; background: linear-gradient(135deg,#fff,#f6fbff); box-shadow: 0 2px 1px #258bdf07; }.ab-number { color: #005cff; font-weight: 750; font-size: 1rem; padding-top: 18px; }.ab-value-icon { display: grid; place-items: center; width: 61px; height: 61px; color: #0873ff; background: linear-gradient(140deg,#e4f4ff,#deecff); border-radius: 17px; margin-bottom: 15px; }.ab-value-icon svg { width: 36px; height: 36px; }.ab-values h3 { font-size: 1.35rem; line-height: 1.2; margin-bottom: 12px; letter-spacing: -.04em; }.ab-values p { font-size: .93rem; line-height: 1.62; color: #41638c; margin: 0 15px 0 0; padding-bottom: 11px; }.ab-value-link { position: absolute; right: 12px; bottom: 22px; display: grid; place-items: center; width: 51px; height: 51px; font-size: 1.8rem; border-radius: 50%; color: #0063ff; background: linear-gradient(140deg,#e5f5ff,#fff); box-shadow: 0 4px 5px #0876ed17; transition: transform .2s,box-shadow .2s; }.ab-value-link:hover { transform: translateX(3px); box-shadow: 0 5px 12px #0876ed33; }

.ab-cta-section { position: relative; padding: 3px 0 26px; background: linear-gradient(175deg,#eaf5ff 20%,#001b35 21%,#00162c); }
.ab-cta { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 1.45fr .77fr .42fr; gap: 38px; align-items: center; padding: 43px 49px; border: 1px solid #337ca9; border-radius: 23px; background: #021a30; color: #fff; box-shadow: inset 0 1px 0 #d3f2ff33; }
.ab-cta::before { content: ""; position: absolute; z-index: -2; inset: 0; background: url('/images/site/over-ons-hero.webp') center 65% / cover; filter: blur(4px); opacity: .36; }.ab-cta::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,#001a30 20%,#031c31d9 54%,#00192d38); }.ab-cta .ab-eyebrow { color: #08bfff; margin-bottom: 14px; }.ab-cta h2 { font-size: clamp(2rem,3vw,2.75rem); line-height: 1.1; letter-spacing: -.038em; margin-bottom: 15px; }.ab-cta h2 > span { color: #74d9ff; }.ab-cta-copy > p:not(.ab-eyebrow) { font-size: .96rem; color: #e6f0fa; line-height: 1.5; margin: 0; }.ab-cta .ab-actions { margin-top: 23px; gap: 22px; }.ab-cta .ab-button { font-size: .87rem; padding-inline: 23px; min-height: 54px; }
.ab-promises { list-style: none; margin: 0; padding: 0 0 0 35px; display: grid; gap: 25px; border-left: 1px solid #0786c988; }.ab-promises li { display: flex; align-items: center; gap: 20px; }.ab-promises i { display: grid; place-items: center; width: 53px; height: 53px; flex: 0 0 53px; border-radius: 12px; color: #06c7ff; background: linear-gradient(140deg,#064a7b,#022944); box-shadow: inset 0 1px 0 #5edcff20; }.ab-promises svg { width: 31px; height: 31px; }.ab-promises strong { display: block; font-size: 1.35rem; color: #fff; line-height: 1.2; margin-bottom: 6px; }.ab-promises span { color: #d5e8f9; font-size: .79rem; line-height: 1.5; }.ab-future { margin: 0; font-size: 1.45rem; color: #e1f4ff; text-align: center; }.ab-future svg { width: 135px; height: 65px; color: #25baff; margin: 5px 0 0 -10px; }

@media (max-width: 1200px) {
    .ab-page .shell { width: calc(100% - 48px); }.ab-hero-copy { padding-left: 0; }.ab-hero h1 { font-size: 3.55rem; }.ab-lead { font-size: .94rem; }.ab-pillars { gap: 18px; }.ab-pillars i { width: 57px; height: 57px; border-radius: 15px; }.ab-pillars svg { width: 31px; height: 31px; }.ab-pillars strong { font-size: 1rem; }.ab-pillars p { font-size: .82rem; }.ab-button { font-size: .81rem; padding-inline: 19px; }.ab-actions { gap: 23px; }.ab-more { font-size: .8rem; }.ab-art-note { left: 6%; font-size: 1.04rem; top: 4%; }.ab-art-note-right { font-size: 1rem; top: 5%; }.ab-hero-art { min-height: 600px; }.ab-story-grid { gap: 45px; padding-inline: 8px; }.ab-story h2 { font-size: 2.8rem; }.ab-story-copy > p { font-size: .91rem; }.ab-principle { gap: 11px; padding: 16px; }.ab-principle > p { font-size: .8rem; }.ab-principle-brand { padding-left: 12px; gap: 8px; }.ab-principle-brand img { width: 33px; }.ab-principle-brand strong { font-size: .68rem; }.ab-principle-brand span { font-size: .6rem; }.ab-values { padding-inline: 6px; gap: 19px; }.ab-values article { padding: 21px 29px 24px 20px; gap: 23px; }.ab-values h3 { font-size: 1.18rem; }.ab-values p { font-size: .82rem; }.ab-value-link { width: 43px; height: 43px; right: 10px; bottom: 19px; font-size: 1.5rem; }.ab-value-icon { width: 54px; height: 54px; }.ab-value-icon svg { width: 31px; height: 31px; }.ab-cta { gap: 26px; padding: 34px; grid-template-columns: 1.4fr .82fr .38fr; }.ab-cta h2 { font-size: 2.1rem; }.ab-cta-copy > p:not(.ab-eyebrow) { font-size: .85rem; }.ab-cta .ab-actions { gap: 14px; }.ab-cta .ab-button { font-size: .73rem; padding-inline: 17px; }.ab-promises { padding-left: 24px; gap: 23px; }.ab-promises li { gap: 13px; }.ab-promises i { width: 46px; height: 46px; flex-basis: 46px; }.ab-promises strong { font-size: 1.11rem; }.ab-promises span { font-size: .69rem; }.ab-future { font-size: 1.19rem; }.ab-future svg { width: 107px; }
}
@media (max-width: 960px) {
    .ab-hero { padding-top: 25px; padding-bottom: 88px; }.ab-hero-grid { grid-template-columns: 1fr; gap: 10px; }.ab-hero-copy { max-width: 640px; padding-top: 10px; }.ab-hero h1 { font-size: 4.1rem; }.ab-lead { font-size: 1.05rem; }.ab-hero-image { object-position: 68% top; opacity: .4; }.ab-hero::before { background: linear-gradient(90deg,#01172edd,#00172e4d); }.ab-pillars { max-width: 620px; gap: 29px; }.ab-pillars strong { font-size: 1.12rem; }.ab-pillars p { font-size: .94rem; }.ab-button { font-size: .94rem; }.ab-more { font-size: .94rem; }.ab-hero-art { width: 88%; min-height: 660px; margin: 11px auto 0; }.ab-art-note { top: 0; left: 7%; font-size: 1.2rem; }.ab-art-note-right { top: 2%; right: 0; font-size: 1.2rem; }.ab-art-note svg { width: 63px; height: 47px; margin-left: 64px; }.ab-art-note-right svg { width: 54px; height: 48px; }
    .ab-story { padding-top: 36px; }.ab-story-grid { grid-template-columns: 1fr; gap: 25px; padding-inline: 0; }.ab-story h2 { max-width: 20ch; font-size: 2.9rem; }.ab-story-copy { padding-top: 0; }.ab-story-copy > p { font-size: 1rem; }.ab-principle { padding: 22px; gap: 17px; }.ab-principle > p { font-size: .98rem; }.ab-principle-brand { gap: 12px; padding-left: 20px; }.ab-principle-brand img { width: 42px; }.ab-principle-brand strong { font-size: .8rem; }.ab-principle-brand span { font-size: .7rem; }.ab-values { gap: 16px; padding-inline: 0; margin-top: 29px; }.ab-values article { display: block; padding: 23px 19px 64px; }.ab-number { position: absolute; right: 20px; top: 14px; font-size: .9rem; }.ab-values h3 { font-size: 1.12rem; }.ab-values p { font-size: .85rem; margin: 0; padding: 0; }.ab-value-link { bottom: 15px; right: 17px; }.ab-cta { grid-template-columns: 1fr 1fr; gap: 30px; padding: 33px; }.ab-cta-copy { grid-column: 1/-1; }.ab-cta h2 { font-size: 2.6rem; }.ab-cta-copy > p:not(.ab-eyebrow) { font-size: .98rem; }.ab-cta .ab-button { font-size: .92rem; }.ab-promises { padding: 0; border-left: 0; gap: 23px; }.ab-promises strong { font-size: 1.25rem; }.ab-promises span { font-size: .82rem; }.ab-promises i { width: 54px; height: 54px; flex-basis: 54px; }.ab-promises li { gap: 18px; }.ab-future { font-size: 1.7rem; justify-self: center; }.ab-future svg { width: 150px; height: 73px; }
}
@media (max-width: 640px) {
    .ab-page .shell { width: calc(100% - 36px); }.ab-hero { padding-top: 25px; padding-bottom: 48px; }.ab-hero-copy { padding-top: 0; }.ab-hero .ab-eyebrow { font-size: .65rem; margin-bottom: 15px; }.ab-hero h1 { font-size: clamp(2.4rem,9vw,3.5rem); line-height: 1.04; margin-bottom: 23px; }.ab-lead { font-size: .97rem; line-height: 1.62; margin-bottom: 27px; }.ab-hero-image { object-position: 70% top; opacity: .29; }.ab-pillars { gap: 14px; }.ab-pillars i { width: 47px; height: 49px; border-radius: 13px; margin-bottom: 12px; }.ab-pillars svg { width: 28px; height: 28px; }.ab-pillars strong { font-size: .92rem; }.ab-pillars p { font-size: .75rem; line-height: 1.5; }.ab-pillars li:not(:last-child)::after { top: 25px; right: -5px; width: 20%; }.ab-actions { margin-top: 27px; gap: 21px; }.ab-button { min-height: 52px; font-size: .89rem; padding: 14px 17px; }.ab-more { font-size: .82rem; }.ab-hero .ab-actions { display: grid; }.ab-hero .ab-actions .ab-more { justify-self: center; }.ab-hero-art { width: 97%; margin-top: 16px; min-height: 0; height: 410px; }.ab-art-note { top: 1%; left: 1%; font-size: .88rem; }.ab-art-note svg { width: 45px; height: 36px; margin-left: 63px; }.ab-art-note-right { font-size: .85rem; right: 0; top: 0; }.ab-art-note-right svg { width: 47px; height: 37px; }.ab-wave { height: 39px; }
    .ab-story { padding: 30px 0 24px; }.ab-story-grid { gap: 23px; }.ab-eyebrow { font-size: .7rem; }.ab-story h2 { font-size: 2.4rem; max-width: 16ch; }.ab-story-copy > p { font-size: .94rem; line-height: 1.65; }.ab-story-copy > p > br { display: none; }.ab-principle { display: grid; grid-template-columns: 24px 1fr; gap: 10px 12px; padding: 19px; border-radius: 15px; }.ab-quote { font-size: 3.1rem; }.ab-principle > p { font-size: .91rem; }.ab-principle > p br { display: none; }.ab-principle-brand { grid-column: 2; padding: 10px 0 0; border-left: 0; border-top: 1px solid #cbdff2; gap: 11px; }.ab-principle-brand img { width: 35px; }.ab-principle-brand span { font-size: .68rem; }.ab-principle-brand strong { font-size: .77rem; }.ab-values { grid-template-columns: 1fr; gap: 14px; margin-top: 23px; }.ab-values article { display: flex; gap: 23px; padding: 23px 58px 25px 21px; }.ab-number { position: static; padding-top: 15px; font-size: .97rem; }.ab-value-icon { width: 55px; height: 55px; margin-bottom: 14px; }.ab-values h3 { font-size: 1.22rem; margin-bottom: 10px; }.ab-values p { font-size: .89rem; }.ab-value-link { right: 12px; bottom: 22px; width: 42px; height: 42px; }
    .ab-cta-section { padding-top: 0; padding-bottom: 23px; }.ab-cta { grid-template-columns: 1fr; padding: 29px 23px; gap: 29px; border-radius: 19px; }.ab-cta h2 { font-size: 2rem; line-height: 1.12; }.ab-cta h2 br { display: none; }.ab-cta-copy > p:not(.ab-eyebrow) { font-size: .9rem; line-height: 1.6; }.ab-cta .ab-actions { display: grid; gap: 13px; margin-top: 23px; }.ab-cta .ab-button { min-height: 52px; font-size: .84rem; padding-inline: 12px; }.ab-promises { padding-top: 24px; border-top: 1px solid #1581bc55; gap: 22px; }.ab-promises i { width: 48px; height: 48px; flex-basis: 48px; }.ab-promises svg { width: 29px; height: 29px; }.ab-promises strong { font-size: 1.2rem; }.ab-promises span { font-size: .81rem; }.ab-future { font-size: 1.38rem; justify-self: center; }.ab-future br { display: none; }.ab-future svg { width: 115px; height: 42px; margin: 4px auto 0; }.ab-cta::before { opacity: .2; }
}
@media (max-width: 360px) { .ab-page .shell { width: calc(100% - 30px); }.ab-hero h1 { font-size: 2.35rem; }.ab-pillars { gap: 11px; }.ab-pillars strong { font-size: .84rem; }.ab-pillars p { font-size: .69rem; }.ab-hero-art { height: 383px; }.ab-art-note { font-size: .76rem; }.ab-art-note-right { font-size: .74rem; }.ab-story h2 { font-size: 2.12rem; }.ab-values article { gap: 17px; padding-left: 18px; }.ab-values h3 { font-size: 1.11rem; }.ab-values p { font-size: .84rem; }.ab-cta { padding-inline: 20px; }.ab-cta h2 { font-size: 1.8rem; } }
@media (prefers-reduced-motion: reduce) { .ab-button,.ab-value-link { transition: none; }.ab-button:hover,.ab-value-link:hover { transform: none; } }

/* Dashboard and phone illustration adapted from the ServiceHub landing. */
.ab-dashboard-back { position: absolute; top: 29%; left: -2%; width: 94%; height: 420px; border: 3px solid #9de7ff; border-radius: 29px; background: linear-gradient(130deg,#0846749c,#0437674d); box-shadow: inset 0 0 22px #00b7ff88,0 0 20px #00aeff88; transform: perspective(1200px) rotateY(-9deg) rotateZ(4deg); }
.ab-dashboard { position: absolute; top: 35%; left: 0; width: 99%; height: 420px; border: 2px solid #73cbff; border-radius: 26px; padding: 12px; color: #071e3d; background: linear-gradient(120deg,#042947,#07192f); box-shadow: inset 0 0 0 5px #061727,0 0 14px #10a5ff77,0 20px 45px #00122980; transform: perspective(1200px) rotateY(-8deg) rotateZ(3deg); }
.ab-app-brand { display: flex; align-items: center; gap: 8px; color: #fff; height: 32px; margin-bottom: 8px; }
.ab-app-brand img { width: 38px; height: auto; }
.ab-app-brand strong { font-size: .65rem; font-style: italic; }
.ab-app-brand > span { flex: 1; font-size: .55rem; margin: 0 10px 0 20px; color: #8cb0d2; padding: 6px 10px; border-radius: 6px; background: #d0e9ff15; }
.ab-app-brand > i { font-size: .38rem; padding: 5px; border-radius: 50%; border: 1px solid #6dbbf3; font-style: normal; }
.ab-app-body { display: grid; grid-template-columns: 23% 1fr; height: calc(100% - 40px); }
.ab-app-nav { color: #d1e5f6; padding: 4px 8px 10px 2px; display: flex; flex-direction: column; gap: 6px; font-size: .57rem; }
.ab-app-nav > * { padding: 8px 9px; }
.ab-app-nav b { border-radius: 6px; background: linear-gradient(100deg,#0097ff,#0450ff); color: #fff; box-shadow: 0 3px 12px #005aff66; }
.ab-app-content { min-width: 0; padding: 21px 15px 9px; border-radius: 12px 12px 15px 12px; background: linear-gradient(135deg,#fff,#f0f6ff); }
.ab-app-content > strong { font-size: .8rem; }
.ab-app-content > strong > span { color: #f6bd27; }
.ab-app-content > p { font-size: .52rem; margin: 1px 0 17px; color: #74859c; }
.ab-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; margin-bottom: 15px; }
.ab-stats > div { padding: 10px 6px 8px; background: #fff; border: 1px solid #e0eafa; border-radius: 8px; box-shadow: 0 3px 8px #194b8b08; }
.ab-stats small { display: block; font-size: .38rem; color: #70849e; white-space: nowrap; }
.ab-stats b { display: block; margin: 3px 0; font-size: .94rem; }
.ab-stats em { display: block; font-size: .36rem; color: #049465; font-style: normal; }
.ab-planning { border: 1px solid #e5edf8; border-radius: 8px; padding: 9px; background: #fff; }
.ab-planning > b { display: block; font-size: .61rem; margin-bottom: 7px; }
.ab-planning > b > span { float: right; color: #0075ff; }
.ab-planning > div { display: grid; grid-template-columns: 6px 37px 1fr auto; align-items: center; gap: 7px; padding: 9px 0; border-top: 1px solid #eef3fa; }
.ab-planning i { width: 6px; height: 6px; background: #ff526d; border-radius: 50%; }
.ab-planning > div:nth-of-type(2) i { background: #06ba8a; }
.ab-planning > div:nth-of-type(3) i { background: #288dff; }
.ab-planning > div:nth-of-type(4) i { background: #f7a546; }
.ab-planning time { font-size: .49rem; font-weight: 700; }
.ab-planning p { font-size: .52rem; margin: 0; font-weight: 650; line-height: 1.35; }
.ab-planning small { display: block; font-size: .44rem; font-weight: 400; color: #8090a6; margin-top: 3px; }
.ab-planning em { color: #008d72; font-size: .35rem; font-style: normal; background: #daf8ee; padding: 3px 4px; border-radius: 4px; }
.ab-planning > div:not(:nth-of-type(1)) em { color: #2872ce; background: #e9f3ff; }
.ab-data-label { display: block; font-size: .38rem; color: #70829d; margin-top: 4px; }
.ab-phone { position: absolute; z-index: 5; right: -3%; top: 53%; width: 32%; padding: 7px; border: 2px solid #91c2e4; border-radius: 30px; color: #0c2446; background: #030d17; box-shadow: 0 6px 2px #01070e,0 18px 25px #001c4059,inset 0 0 0 2px #243341; transform: rotate(8deg); }
.ab-phone-top { position: relative; display: flex; justify-content: space-between; gap: 7px; font-size: .35rem; padding: 5px 10px 11px; color: #c9deee; }
.ab-phone-top > b { width: 41%; background: #060d14; border: 1px solid #192b3d; height: 8px; margin-top: -7px; border-radius: 0 0 8px 8px; }
.ab-phone-content { background: #fff; border-radius: 16px; padding: 18px 11px 10px; }
.ab-phone-content > strong { display: block; font-size: .72rem; }
.ab-phone-status { display: inline-block; font-size: .5rem; font-weight: 700; padding: 4px 7px; margin: 8px 0 16px; background: #d9fae9; color: #13875e; border-radius: 8px; }
.ab-phone-content > b { display: block; font-size: .6rem; }
.ab-phone-content > small { display: block; font-size: .42rem; color: #73829a; margin-top: 4px; }
.ab-phone-tabs { display: flex; justify-content: space-between; gap: 5px; padding: 11px 0 7px; border-bottom: 1px solid #e5edf6; font-size: .42rem; color: #7d8ca2; }
.ab-phone-tabs b { color: #0679ff; }
.ab-phone-content ul { margin: 6px 0; padding: 0; list-style: none; }
.ab-phone-content li { display: flex; gap: 5px; align-items: center; padding: 8px 0; font-size: .46rem; color: #5a6a80; }
.ab-phone-content li::before { content: "✓"; color: #fff; display: grid; place-items: center; width: 11px; height: 11px; border-radius: 50%; background: #15c394; font-size: .44rem; }
.ab-signature { width: 100%; height: 54px; fill: none; stroke: #084a9d; stroke-width: 1.5; stroke-linecap: round; }
.ab-phone-button { display: block; text-align: center; padding: 9px 5px; border-radius: 6px; background: linear-gradient(100deg,#008dff,#034bff); color: #fff; font-size: .52rem; }
.ab-phone-home { display: block; width: 36%; height: 3px; margin: 7px auto 1px; border-radius: 5px; background: #e9f5ff; }
@media (max-width: 1200px) {
.ab-dashboard, .ab-dashboard-back { height: 365px; }
.ab-dashboard { top: 39%; }
.ab-dashboard-back { top: 34%; }
.ab-app-nav { font-size: .47rem; gap: 4px; }
.ab-app-nav > * { padding: 7px 5px; }
.ab-app-content { padding: 15px 9px 8px; }
.ab-app-content > strong { font-size: .7rem; }
.ab-stats { gap: 4px; margin-bottom: 10px; }
.ab-stats > div { padding: 8px 4px; }
.ab-stats small { font-size: .3rem; }
.ab-stats b { font-size: .75rem; }
.ab-stats em { font-size: .29rem; }
.ab-planning > div { padding: 8px 0; gap: 4px; grid-template-columns: 5px 29px 1fr; }
.ab-planning em { display: none; }
.ab-planning p { font-size: .47rem; }
.ab-planning time { font-size: .42rem; }
.ab-planning small { font-size: .36rem; }
.ab-phone { top: 56%; width: 34%; border-radius: 25px; }
.ab-phone-content { padding: 14px 8px 9px; }
.ab-phone-content > strong { font-size: .58rem; }
.ab-phone-status { font-size: .43rem; margin-bottom: 11px; }
.ab-phone-content > b { font-size: .51rem; }
.ab-phone-content > small { font-size: .36rem; }
.ab-phone-content li { font-size: .4rem; padding: 7px 0; }
.ab-phone-tabs { font-size: .36rem; }
.ab-phone-button { font-size: .43rem; }
.ab-signature { height: 43px; }
}
@media (max-width: 960px) {
.ab-dashboard-back { top: 23%; height: 405px; }
.ab-dashboard { top: 29%; height: 405px; width: 96%; }
.ab-app-nav { font-size: .56rem; }
.ab-app-nav > * { padding: 8px; }
.ab-app-content { padding: 19px 14px 9px; }
.ab-app-content > strong { font-size: .84rem; }
.ab-app-content > p { font-size: .56rem; }
.ab-stats > div { padding: 10px 6px; }
.ab-stats small { font-size: .39rem; }
.ab-stats b { font-size: .95rem; }
.ab-stats em { font-size: .36rem; }
.ab-planning > b { font-size: .64rem; }
.ab-planning > div { grid-template-columns: 5px 37px 1fr; gap: 8px; padding: 10px 0; }
.ab-planning p { font-size: .58rem; }
.ab-planning time { font-size: .52rem; }
.ab-planning small { font-size: .44rem; }
.ab-phone { top: 45%; right: -3%; width: 32%; }
.ab-phone-content > strong { font-size: .65rem; }
.ab-phone-status { font-size: .48rem; }
.ab-phone-content li { font-size: .47rem; padding: 9px 0; }
.ab-phone-tabs { font-size: .43rem; }
.ab-phone-content > b { font-size: .6rem; }
.ab-phone-content > small { font-size: .39rem; }
.ab-phone-button { font-size: .52rem; }
}
@media (max-width: 640px) {
.ab-dashboard-back { top: 26%; height: 232px; border-width: 2px; border-radius: 17px; }
.ab-dashboard { top: 32%; height: 239px; padding: 7px; border-radius: 16px; box-shadow: inset 0 0 0 3px #061727,0 0 12px #10a5ff77,0 15px 30px #00122980; }
.ab-app-brand { height: 18px; gap: 4px; margin-bottom: 5px; }
.ab-app-brand img { width: 23px; }
.ab-app-brand strong { font-size: .38rem; }
.ab-app-brand > span { font-size: .3rem; padding: 3px 6px; margin: 0 6px 0 8px; }
.ab-app-brand > i { font-size: .23rem; padding: 2px; }
.ab-app-body { height: calc(100% - 23px); grid-template-columns: 23% 1fr; }
.ab-app-nav { padding: 2px 5px 5px 0; gap: 2px; font-size: .32rem; }
.ab-app-nav > * { padding: 5px 4px; }
.ab-app-nav b { border-radius: 4px; }
.ab-app-content { padding: 12px 7px 5px; border-radius: 8px; }
.ab-app-content > strong { font-size: .47rem; }
.ab-app-content > p { font-size: .32rem; margin: 1px 0 9px; }
.ab-stats { gap: 3px; margin-bottom: 7px; }
.ab-stats > div { padding: 5px 3px; border-radius: 4px; }
.ab-stats small { font-size: .21rem; }
.ab-stats b { font-size: .54rem; margin: 2px 0; }
.ab-stats em { font-size: .21rem; }
.ab-planning { padding: 5px; border-radius: 5px; }
.ab-planning > b { font-size: .36rem; margin-bottom: 3px; }
.ab-planning > div { gap: 4px; grid-template-columns: 3px 23px 1fr; padding: 6px 0; }
.ab-planning i { width: 3px; height: 3px; }
.ab-planning p { font-size: .31rem; }
.ab-planning time { font-size: .29rem; }
.ab-planning small { font-size: .24rem; margin-top: 2px; }
.ab-data-label { font-size: .25rem; margin-top: 3px; }
.ab-phone { top: 46%; right: -1%; width: 34%; padding: 5px; border-radius: 19px; border-width: 1px; }
.ab-phone-top { padding: 3px 5px 7px; font-size: .23rem; gap: 3px; }
.ab-phone-top > b { height: 5px; margin-top: -5px; }
.ab-phone-content { border-radius: 11px; padding: 11px 6px 7px; }
.ab-phone-content > strong { font-size: .39rem; }
.ab-phone-status { font-size: .3rem; padding: 3px 4px; margin: 5px 0 8px; border-radius: 5px; }
.ab-phone-content > b { font-size: .36rem; }
.ab-phone-content > small { font-size: .25rem; margin-top: 2px; }
.ab-phone-tabs { font-size: .27rem; gap: 2px; padding: 8px 0 5px; }
.ab-phone-content ul { margin: 4px 0; }
.ab-phone-content li { font-size: .28rem; padding: 5px 0; gap: 3px; }
.ab-phone-content li::before { width: 7px; height: 7px; font-size: .29rem; }
.ab-signature { height: 30px; }
.ab-phone-button { font-size: .32rem; padding: 6px 3px; border-radius: 4px; }
.ab-phone-home { height: 2px; margin: 5px auto 1px; }
}
@media (max-width: 360px) {
.ab-dashboard-back { height: 220px; }
.ab-dashboard { height: 223px; top: 33%; }
.ab-stats small { font-size: .18rem; }
.ab-stats b { font-size: .46rem; }
.ab-stats em { font-size: .18rem; }
.ab-app-content > strong { font-size: .39rem; }
.ab-app-nav { font-size: .27rem; }
.ab-planning p { font-size: .26rem; }
.ab-planning small { font-size: .21rem; }
.ab-phone { top: 48%; width: 36%; }
.ab-phone-content > strong { font-size: .33rem; }
.ab-phone-content li { font-size: .23rem; }
.ab-phone-content > small { font-size: .22rem; }
}
.ab-dashboard { overflow: hidden; }
.ab-app-content { min-height: 0; overflow: hidden; }
@media (min-width: 961px) {
.ab-phone { right: 2%; width: 29%; }
}
@media (min-width: 961px) and (max-width: 1200px) {
.ab-phone { right: 5%; width: 32%; }
}
@media (max-width: 640px) {
.ab-phone { right: 3%; width: 32%; }
}
@media (max-width: 360px) {
.ab-phone { right: 4%; width: 34%; }
}

/* Position the devices in this hero without changing their reusable proportions. */
.ab-dashboard { overflow: hidden; top: 35%; width: 95%; }
.ab-dashboard-back { top: 31%; width: 92%; }
.ab-phone { top: 54%; right: 2%; width: 29%; }
@media (min-width: 961px) and (max-width: 1200px) { .ab-phone { right: 4%; width: 32%; } }
@media (max-width: 960px) { .ab-dashboard { top: 29%; }.ab-dashboard-back { top: 24%; }.ab-phone { top: 46%; width: 31%; right: 1%; } }
@media (max-width: 640px) { .ab-dashboard { top: 32%; }.ab-dashboard-back { top: 27%; }.ab-phone { top: 46%; width: 32%; right: 3%; } }
@media (max-width: 360px) { .ab-phone { width: 34%;right: 4%; } }

@media (min-width: 961px) { .ab-hero { padding-bottom: 124px; }.ab-story h2 { font-size: clamp(2.4rem,3.2vw,3rem); max-width: 17ch; } }