/* Page-specific version of the approved homepage feature panel.
   Upright containers, cobalt face, teal offset backing and four visible tiles.
   The homepage does not load this file. No presentation here changes controls. */
.feature-panel{--panel-blue:#2563eb;--panel-teal:#0fb9b1;min-width:0;width:100%;padding:0 11px 0 0;text-align:left}
.feature-panel-main{position:relative;isolation:isolate;min-height:240px;padding:29px 28px 22px;border-radius:12px;background:var(--panel-blue);box-shadow:11px 10px 0 var(--panel-teal);color:#fff;overflow:visible}
.feature-panel-copy{position:relative;z-index:1;padding-right:126px;min-height:142px}
.feature-panel .feature-panel-kicker{font-size:10px;font-weight:700;line-height:1.45;letter-spacing:1.45px;text-transform:uppercase;color:#c9dcff;margin:0 0 15px}
.feature-panel .feature-panel-copy h2{font-size:31px;line-height:1.13;letter-spacing:-1.1px;color:#fff;max-width:none;margin:0;font-weight:700}
.feature-panel .feature-panel-description{font-size:13px;line-height:1.5;color:#dae7ff;margin:17px 0 0;max-width:none}
.feature-panel-art{position:absolute;right:22px;top:42px;width:122px;height:115px;color:#a8c6ff;opacity:.92;pointer-events:none}
.feature-panel-footer{display:flex;align-items:center;gap:9px;margin-top:23px;padding-top:18px;border-top:1px solid #5789ed;font-size:12px;line-height:1.45;color:#dce9ff;position:relative;z-index:1}
.feature-panel-footer>.icon{width:18px;height:18px;flex:0 0 18px}
.feature-panel-footer strong{color:#fff;font-size:14px;font-weight:700}
.feature-panel-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:23px}
.feature-panel-tile{min-width:0;display:grid;grid-template-columns:23px minmax(0,1fr);align-items:start;gap:12px;padding:19px 18px 17px;background:#fff;border:1px solid #d6e2f3;border-radius:8px;min-height:88px}
.feature-panel-tile>.icon{width:23px;height:23px;flex:0 0 23px;margin-top:1px}
.feature-panel-tile>div{flex:1;min-width:0}
.feature-panel .feature-panel-tile h3{font-size:15px;line-height:1.3;letter-spacing:-.35px;font-weight:700;color:#0a1b2e;margin:0}
.feature-panel .feature-panel-tile p{font-size:11px;line-height:1.5;font-weight:400;color:#637993;margin:6px 0 0;max-width:none}
.feature-panel-compact .feature-panel-main{min-height:165px;padding:22px 22px 18px}
.feature-panel-compact .feature-panel-copy{padding-right:90px;min-height:82px}
.feature-panel-compact .feature-panel-kicker{font-size:9px;letter-spacing:1.15px;margin-bottom:10px}
.feature-panel-compact .feature-panel-copy h2{font-size:25px;letter-spacing:-.65px}
.feature-panel-compact .feature-panel-description{font-size:11px;margin-top:10px}
.feature-panel-compact .feature-panel-art{width:84px;height:80px;top:30px;right:19px}
.feature-panel-compact .feature-panel-footer{margin-top:15px;padding-top:13px;font-size:10px}
.feature-panel-compact .feature-panel-footer>.icon{width:16px;height:16px;flex-basis:16px}
.feature-panel-compact .feature-panel-footer strong{font-size:12px}
.feature-panel-compact .feature-panel-tiles{gap:10px;margin-top:22px}
.feature-panel-compact .feature-panel-tile{grid-template-columns:19px minmax(0,1fr);padding:13px 14px;gap:10px;min-height:67px}
.feature-panel-compact .feature-panel-tile>.icon{width:19px;height:19px;flex-basis:19px}
.feature-panel-compact .feature-panel-tile h3{font-size:12px;letter-spacing:-.2px}
.feature-panel-compact .feature-panel-tile p{font-size:10px;margin-top:4px}







@media(max-width:1100px){.feature-panel-main{padding:25px 24px 21px}.feature-panel-copy{padding-right:99px}.feature-panel .feature-panel-copy h2{font-size:28px}.feature-panel-art{width:98px;height:98px;right:16px;top:42px}.feature-panel-tile{padding:17px 14px;gap:10px}.feature-panel .feature-panel-tile h3{font-size:14px}.feature-panel-compact .feature-panel-copy h2{font-size:24px}}
@media(max-width:760px){.feature-panel{margin-top:32px;padding-right:8px}.feature-panel-main{padding:23px 22px 19px;min-height:221px;border-radius:10px;box-shadow:8px 9px 0 var(--panel-teal)}.feature-panel-copy{padding-right:84px;min-height:128px}.feature-panel .feature-panel-kicker{font-size:9px;letter-spacing:1.15px;margin-bottom:13px}.feature-panel .feature-panel-copy h2{font-size:28px;line-height:1.13;letter-spacing:-.8px}.feature-panel .feature-panel-description{font-size:11px;line-height:1.5;margin-top:14px}.feature-panel-art{width:83px;height:91px;top:40px;right:13px}.feature-panel-footer{font-size:10px;margin-top:20px;padding-top:16px;gap:8px}.feature-panel-footer strong{font-size:12px}.feature-panel-footer>.icon{width:16px;height:16px;flex-basis:16px}.feature-panel-tiles{gap:10px;margin-top:22px}.feature-panel-tile{grid-template-columns:20px minmax(0,1fr);padding:16px 13px;gap:9px;min-height:91px;border-radius:7px}.feature-panel-tile>.icon{width:20px;height:20px;flex-basis:20px}.feature-panel .feature-panel-tile h3{font-size:13px;line-height:1.35;letter-spacing:-.25px}.feature-panel .feature-panel-tile p{font-size:10px;line-height:1.5;margin-top:6px}.feature-panel-compact{margin-top:25px}.feature-panel-compact .feature-panel-main{min-height:158px;padding:20px 20px 17px}.feature-panel-compact .feature-panel-copy{padding-right:76px;min-height:78px}.feature-panel-compact .feature-panel-copy h2{font-size:23px}.feature-panel-compact .feature-panel-art{width:70px;height:74px;top:28px;right:16px}.feature-panel-compact .feature-panel-description{font-size:10px;margin-top:10px}.feature-panel-compact .feature-panel-kicker{font-size:8px;margin-bottom:9px}.feature-panel-compact .feature-panel-footer{margin-top:13px;padding-top:12px;font-size:10px}.feature-panel-compact .feature-panel-tiles{gap:9px;margin-top:21px}.feature-panel-compact .feature-panel-tile{grid-template-columns:18px minmax(0,1fr);padding:13px 11px;min-height:72px;gap:8px}.feature-panel-compact .feature-panel-tile>.icon{width:18px;height:18px;flex-basis:18px}.feature-panel-compact .feature-panel-tile h3{font-size:12px}.feature-panel-compact .feature-panel-tile p{font-size:10px;margin-top:4px}}

/* At very narrow widths, the title owns its full line; art stays decorative. */
@media(max-width:360px){.feature-panel-copy{padding-right:0;min-height:0}.feature-panel .feature-panel-kicker{padding-right:64px;min-height:22px;margin-bottom:20px}.feature-panel .feature-panel-copy h2{font-size:27px}.feature-panel-art{width:52px;height:50px;top:15px;right:20px}.feature-panel-main{min-height:228px}.feature-panel-tile{display:block;padding:14px 13px;min-height:111px}.feature-panel-tile>.icon{margin:0 0 9px}.feature-panel .feature-panel-tile h3{font-size:13px}.feature-panel-compact .feature-panel-kicker{min-height:18px;margin-bottom:16px}.feature-panel-compact .feature-panel-copy h2{font-size:23px}.feature-panel-compact .feature-panel-art{width:48px;height:45px;top:13px}.feature-panel-compact .feature-panel-main{min-height:185px}}

/* Service heroes stack on tablets so the feature story stays readable. */
@media(min-width:761px) and (max-width:900px){.page-web-hosting .page-hero-grid,.page-wordpress-hosting .page-hero-grid,.page-business-email-hosting-mauritius .page-hero-grid,.page-vps-hosting-mauritius .page-hero-grid{display:block}.page-hero-grid>.feature-panel{margin-top:32px}.page-hero-grid>.feature-panel .feature-panel-copy{padding-right:146px}.page-hero-grid>.feature-panel .feature-panel-copy h2{font-size:31px}.page-hero-grid>.feature-panel .feature-panel-art{width:122px;height:115px;right:24px;top:38px}.page-hero-grid>.feature-panel .feature-panel-tile{padding:19px 18px;gap:12px}.page-hero-grid>.feature-panel .feature-panel-tile h3{font-size:15px}}