/* Framework 0.3.117 — Managed Services, using the shared package explorer.
 * The care overview illustrates responsibilities, not live monitoring data.
 * Every rule is opt-in; website packages and the homepage stay unchanged. */

/* Preserve the established Managed Services page width and section rhythm. */
:is(.imf-site,.editor-styles-wrapper) .im-scope-page.im-scope-managed .im-inner {
  width:100%;max-width:var(--im-wide,1240px);margin-inline:auto!important;
}
:is(.imf-site,.editor-styles-wrapper) .im-scope-page.im-scope-managed > .im-section {
  padding:clamp(60px,6.2vw,var(--im-section-space,88px)) clamp(24px,5vw,80px);
}
:is(.imf-site,.editor-styles-wrapper) .im-scope-page.im-scope-managed > #im-managed-intro {
  padding-block:clamp(52px,5.8vw,84px);
}
:is(.imf-site,.editor-styles-wrapper) .im-scope-page.im-scope-managed > #im-managed-contact {
  padding-block:clamp(56px,6vw,88px);
}
:is(.imf-site,.editor-styles-wrapper) .im-scope-page.im-scope-managed #im-managed-plans.im-scope-explorer {
  padding-block:clamp(56px,5.8vw,82px);
  background:radial-gradient(ellipse at 0% 55%,#e5f2ff 0%,transparent 48%),radial-gradient(ellipse at 100% 84%,#fff2e9 0%,transparent 44%),linear-gradient(180deg,#f2f8fd,#f8fbff);
  scroll-margin-top:110px;
}
:is(.imf-site,.editor-styles-wrapper) .im-scope-managed .im-managed-explorer-head {
  display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  column-gap:clamp(24px,4vw,64px);row-gap:12px;align-items:end;
  margin:0 0 30px!important;
}
:is(.imf-site,.editor-styles-wrapper) .im-scope-managed .im-managed-explorer-head > .im-eyebrow {
  grid-column:1 / -1;margin:0!important;
}
:is(.imf-site,.editor-styles-wrapper) .im-scope-managed .im-managed-explorer-head > h2 {
  grid-column:1;margin:0!important;max-width:17ch;
  color:#123654;font:400 clamp(32px,3.25vw,46px)/1.13 Georgia,"Times New Roman",serif;
  letter-spacing:-.035em;text-wrap:balance;
}
:is(.imf-site,.editor-styles-wrapper) .im-scope-managed .im-managed-explorer-head > p:not(.im-eyebrow) {
  grid-column:2;margin:0!important;max-width:49ch;justify-self:end;
  color:#526b86;font:400 15px/1.75 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* All three choices describe different responsibilities, not a price scale. */
.im-scope-page.im-scope-managed #im-hosting,
.im-scope-page.im-scope-managed .im-scope-choice[data-im-scope-key="managed-hosting"],
.im-scope-page.im-scope-managed .im-care-compare-hosting {
  --im-scope-package-icon:url("../images/icons/speed.svg");
}
.im-scope-page.im-scope-managed #im-maintenance,
.im-scope-page.im-scope-managed .im-scope-choice[data-im-scope-key="managed-maintenance"],
.im-scope-page.im-scope-managed .im-care-compare-maintenance {
  --im-scope-package-icon:url("../images/icons/care.svg");
}
.im-scope-page.im-scope-managed #im-hosting-care,
.im-scope-page.im-scope-managed .im-scope-choice[data-im-scope-key="managed-bundle"],
.im-scope-page.im-scope-managed .im-care-compare-bundle {
  --im-scope-package-icon:url("../images/icons/integration.svg");
}
.im-scope-page.im-scope-managed #im-managed-plans .im-scope-choices {
  grid-template-columns:repeat(3,minmax(0,1fr));
}
:is(.imf-site,.editor-styles-wrapper) .im-scope-page.im-scope-managed .im-scope-plan-title {
  font-size:clamp(31px,3.3vw,43px);
}
:is(.imf-site,.editor-styles-wrapper) .im-scope-page.im-scope-managed .im-scope-plan-fit {
  max-width:42ch;
}
:is(.imf-site,.editor-styles-wrapper) .im-scope-page.im-scope-managed .im-scope-plan-note {
  max-width:49ch;margin-top:14px!important;
}
:is(.imf-site,.editor-styles-wrapper) .im-scope-page.im-scope-managed .im-scope-visual {
  max-width:530px;
}

/* A small care dashboard makes the hosting / WordPress boundary tangible.
 * The shared im-site-preview-bar supplies the existing Mac-style chrome. */
:is(.imf-site,.editor-styles-wrapper) .im-scope-managed .im-care-preview {
  border-color:#c9dbe9;background:#fff;
}
:is(.imf-site,.editor-styles-wrapper) .im-scope-managed .im-care-dashboard-body {
  padding:21px 22px 18px;
  background:radial-gradient(ellipse at 100% 0%,#f0f8ff,transparent 65%),#fff;
}
:is(.imf-site,.editor-styles-wrapper) .im-scope-managed .im-care-dashboard-kicker {
  color:#5d7691;font:650 10px/1.5 system-ui,sans-serif;
  text-transform:uppercase;letter-spacing:.09em;
}
:is(.imf-site,.editor-styles-wrapper) .im-scope-managed .im-care-preview .im-care-dashboard-title {
  margin:6px 0 18px!important;
  color:#173b5e;font:400 clamp(23px,2.1vw,28px)/1.2 Georgia,"Times New Roman",serif;
  letter-spacing:-.025em;text-wrap:balance;
}
:is(.imf-site,.editor-styles-wrapper) .im-scope-managed .im-care-owners {
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
}
:is(.imf-site,.editor-styles-wrapper) .im-scope-managed .im-care-owner {
  display:flex;flex-direction:column;justify-content:space-between;gap:13px;
  min-width:0;min-height:95px;padding:13px 12px;
  border:1px solid #dce5ee;border-radius:10px;
  background:#f7f9fc;box-shadow:inset 0 1px 0 #fff;
}
:is(.imf-site,.editor-styles-wrapper) .im-scope-managed .im-care-owner--ours {
  border-color:#a8cce8;
  background:linear-gradient(145deg,#f1f9ff,#e9f3fc);
}
:is(.imf-site,.editor-styles-wrapper) .im-scope-managed .im-care-owner-label {
  display:flex;align-items:center;gap:7px;
  color:#4c6781;font:500 12px/1.4 system-ui,sans-serif;
}
.im-scope-managed .im-care-owner-label::before {
  content:"";display:block;flex:0 0 21px;width:21px;height:21px;
  background:var(--im-care-owner-icon) center/contain no-repeat;
}
.im-scope-managed .im-care-owner-label--hosting {--im-care-owner-icon:url("../images/icons/speed.svg")}
.im-scope-managed .im-care-owner-label--wordpress {--im-care-owner-icon:url("../images/icons/code.svg")}
:is(.imf-site,.editor-styles-wrapper) .im-scope-managed .im-care-owner-value {
  color:#4e6781;font:600 13px/1.45 system-ui,sans-serif;
}
:is(.imf-site,.editor-styles-wrapper) .im-scope-managed .im-care-owner--ours .im-care-owner-value {
  color:#164c7a;
}
:is(.imf-site,.editor-styles-wrapper) .im-scope-managed .im-care-preview .im-care-work {
  display:grid!important;gap:0;margin-top:15px!important;
}
:is(.imf-site,.editor-styles-wrapper) .im-scope-managed .im-care-work-item {
  display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:9px;row-gap:1px;align-items:center;min-height:49px;
  padding:8px 0;border-bottom:1px solid #e4ecf3;
  color:#315574;font:500 12px/1.5 system-ui,sans-serif;
}
.im-scope-managed .im-care-work-item > strong {
  grid-column:2;grid-row:1;color:#284e71;font:600 12px/1.5 system-ui,sans-serif;
}
.im-scope-managed .im-care-work-item > span {
  grid-column:2;grid-row:2;color:#5c748d;font:400 11px/1.5 system-ui,sans-serif;
}
.im-scope-managed .im-care-work-item:last-child {border-bottom:0}
.im-scope-managed .im-care-work-item::before {
  content:"";display:block;grid-column:1;grid-row:1 / span 2;width:21px;height:21px;
  background:var(--im-care-work-icon) center/contain no-repeat;
}
.im-scope-managed .im-care-work-item--server {--im-care-work-icon:url("../images/icons/speed.svg")}
.im-scope-managed .im-care-work-item--shield {--im-care-work-icon:url("../images/icons/care.svg")}
.im-scope-managed .im-care-work-item--support {--im-care-work-icon:url("../images/icons/chat.svg")}
.im-scope-managed .im-care-work-item--updates {--im-care-work-icon:url("../images/icons/code.svg")}
.im-scope-managed .im-care-work-item--backup {--im-care-work-icon:url("../images/icons/structure.svg")}
.im-scope-managed .im-care-work-item--performance {--im-care-work-icon:url("../images/icons/inspect.svg")}
:is(.imf-site,.editor-styles-wrapper) .im-scope-managed .im-care-preview .im-care-dashboard-note {
  margin-top:13px!important;padding-top:12px;border-top:1px solid #dce6ef;
  color:#5b728a;font:400 11px/1.6 system-ui,sans-serif;
}

/* Keep longer service names and the original inclusion lists readable. */
:is(.imf-site,.editor-styles-wrapper) .im-scope-page.im-scope-managed .im-scope-compare-card h3 {
  align-items:flex-start;font-size:25px;line-height:1.23;
}
.im-scope-page.im-scope-managed .im-scope-compare-card h3::before {margin-top:2px}
:is(.imf-site,.editor-styles-wrapper) .im-scope-page.im-scope-managed .im-scope-compare-note {
  padding-top:15px;border-top:1px solid #e0e8f1;
}
.im-scope-managed #im-managed-plans .im-package-accordion-mark {
  display:inline-grid;place-items:center;flex:0 0 23px;
  border:1px solid #d3e5f3;border-radius:50%;font:700 17px/1 system-ui,sans-serif;
}

@media(max-width:900px) {
  :is(.imf-site,.editor-styles-wrapper) .im-scope-page.im-scope-managed > .im-section {padding-inline:28px}
  :is(.imf-site,.editor-styles-wrapper) .im-scope-managed .im-managed-explorer-head {column-gap:25px}
  :is(.imf-site,.editor-styles-wrapper) .im-scope-page.im-scope-managed .im-scope-visual {max-width:530px}
}
@media(max-width:780px) {
  :is(.imf-site,.editor-styles-wrapper) .im-scope-page.im-scope-managed > .im-section {padding:60px 24px}
  :is(.imf-site,.editor-styles-wrapper) .im-scope-page.im-scope-managed > #im-managed-intro {padding-block:clamp(52px,5.8vw,84px)}
  :is(.imf-site,.editor-styles-wrapper) .im-scope-page.im-scope-managed > #im-managed-contact {padding-block:clamp(56px,6vw,88px)}
  :is(.imf-site,.editor-styles-wrapper) .im-scope-managed .im-managed-explorer-head {grid-template-columns:minmax(0,1fr);gap:13px;margin-bottom:24px!important}
  :is(.imf-site,.editor-styles-wrapper) .im-scope-managed .im-managed-explorer-head > h2 {max-width:24ch}
  :is(.imf-site,.editor-styles-wrapper) .im-scope-managed .im-managed-explorer-head > p:not(.im-eyebrow) {grid-column:1;justify-self:start;max-width:60ch}
}
@media(max-width:600px) {
  .im-scope-page.im-scope-managed #im-managed-plans .im-scope-choices {grid-template-columns:minmax(0,1fr);gap:9px}
  .im-scope-page.im-scope-managed #im-managed-plans[data-im-scope-count="3"] .im-scope-choice {
    grid-template-columns:32px minmax(0,1fr);column-gap:11px;row-gap:3px;
    min-height:69px;padding:10px 14px 12px;justify-items:start;text-align:left;font-size:14px;
  }
  .im-scope-page.im-scope-managed #im-managed-plans[data-im-scope-count="3"] .im-scope-choice-icon {grid-column:1;grid-row:1 / span 2;width:32px;height:32px}
  .im-scope-page.im-scope-managed #im-managed-plans[data-im-scope-count="3"] .im-scope-choice-title {grid-column:2;grid-row:1;overflow-wrap:normal}
  .im-scope-page.im-scope-managed #im-managed-plans[data-im-scope-count="3"] .im-scope-choice-capacity {display:block;grid-column:2;grid-row:2;font-size:12px}
  .im-scope-page.im-scope-managed #im-managed-plans .im-scope-choice::after {left:57px;width:28px}
  :is(.imf-site,.editor-styles-wrapper) .im-scope-page.im-scope-managed .im-scope-plan-title {font-size:33px}
  :is(.imf-site,.editor-styles-wrapper) .im-scope-page.im-scope-managed .im-scope-compare-card h3 {font-size:25px}
}
@media(max-width:480px) {
  :is(.imf-site,.editor-styles-wrapper) .im-scope-page.im-scope-managed #im-managed-plans.im-scope-explorer {padding:48px 18px}
  :is(.imf-site,.editor-styles-wrapper) .im-scope-managed .im-managed-explorer-head > h2 {font-size:32px}
  :is(.imf-site,.editor-styles-wrapper) .im-scope-managed .im-managed-explorer-head > p:not(.im-eyebrow) {font-size:14px}
  :is(.imf-site,.editor-styles-wrapper) .im-scope-managed .im-care-dashboard-body {padding:18px 14px 15px}
  :is(.imf-site,.editor-styles-wrapper) .im-scope-managed .im-care-preview .im-care-dashboard-title {font-size:23px;margin-bottom:15px!important}
  :is(.imf-site,.editor-styles-wrapper) .im-scope-managed .im-care-owners {gap:8px}
  :is(.imf-site,.editor-styles-wrapper) .im-scope-managed .im-care-owner {min-height:106px;padding:11px 10px;gap:10px}
  :is(.imf-site,.editor-styles-wrapper) .im-scope-managed .im-care-owner-label {flex-direction:column;align-items:flex-start;gap:6px;font-size:12px}
  :is(.imf-site,.editor-styles-wrapper) .im-scope-managed .im-care-owner-value {font-size:12px}
  :is(.imf-site,.editor-styles-wrapper) .im-scope-managed .im-care-work-item {font-size:12px}
  :is(.imf-site,.editor-styles-wrapper) .im-scope-page.im-scope-managed .im-scope-actions {display:flex!important;align-items:flex-start;gap:8px 18px}
  :is(.imf-site,.editor-styles-wrapper) .im-scope-page.im-scope-managed .im-scope-actions .im-package-more-link {width:auto}
  :is(.imf-site,.editor-styles-wrapper) .im-scope-page.im-scope-managed .im-scope-actions .im-scope-unsure a {justify-content:flex-start;text-align:left}
}
@media(max-width:370px) {
  :is(.imf-site,.editor-styles-wrapper) .im-scope-page.im-scope-managed > #im-managed-contact {padding-inline:20px}
}

/* Motion comes from the shared slider and one short panel arrival only. */
@media screen and (prefers-reduced-motion:no-preference) and (forced-colors:none) {
  .im-scope-managed .im-scope-is-arriving .im-care-owners {animation:im-scope-fit-content-enter .22s .04s ease-out both}
  .im-scope-managed .im-scope-is-arriving .im-care-work {animation:im-scope-fit-content-enter .22s .07s ease-out both}
}
@media(prefers-reduced-motion:reduce) {
  .im-scope-managed :is(.im-care-owners,.im-care-work) {animation:none!important;transform:none!important;opacity:1!important}
}
@media(forced-colors:active) {
  :is(.imf-site,.editor-styles-wrapper) .im-scope-managed :is(.im-care-preview,.im-care-dashboard-body,.im-care-owner,.im-care-work-item,.im-care-dashboard-note) {
    background:Canvas!important;color:CanvasText!important;border-color:CanvasText!important;box-shadow:none!important;
  }
  :is(.imf-site,.editor-styles-wrapper) .im-scope-managed :is(.im-managed-explorer-head h2,.im-managed-explorer-head p,.im-care-dashboard-kicker,.im-care-dashboard-title,.im-care-owner-label,.im-care-owner-value) {color:CanvasText!important}
  .im-scope-managed :is(.im-care-owner-label,.im-care-work-item)::before {display:none!important}
  :is(.imf-site,.editor-styles-wrapper) .im-scope-managed .im-care-work-item {grid-template-columns:minmax(0,1fr)}
  .im-scope-managed .im-care-work-item > :is(strong,span) {grid-column:1;color:CanvasText!important}
  .im-scope-managed .im-care-owner--ours {outline:1px solid Highlight;outline-offset:-1px}
  :is(.imf-site,.editor-styles-wrapper) .im-scope-page.im-scope-managed #im-managed-plans.im-scope-explorer {background:Canvas!important}
}
@media print {
  :is(.imf-site,.editor-styles-wrapper) .im-scope-page.im-scope-managed > .im-section {padding:24px 0!important}
  :is(.imf-site,.editor-styles-wrapper) .im-scope-page.im-scope-managed #im-managed-plans.im-scope-explorer {background:#fff!important}
  :is(.imf-site,.editor-styles-wrapper) .im-scope-managed .im-managed-explorer-head {display:block!important}
  :is(.imf-site,.editor-styles-wrapper) .im-scope-managed .im-managed-explorer-head > :is(h2,p) {max-width:none;color:#000!important;margin-bottom:12px!important}
  :is(.imf-site,.editor-styles-wrapper) .im-scope-managed :is(.im-care-owner,.im-care-work-item,.im-care-dashboard-note) {border-color:#888!important}
  .im-scope-managed :is(.im-care-owner-label,.im-care-work-item)::before {display:none!important}
  :is(.imf-site,.editor-styles-wrapper) .im-scope-managed .im-care-work-item {grid-template-columns:minmax(0,1fr)}
  .im-scope-managed .im-care-work-item > :is(strong,span) {grid-column:1}
  .im-scope-managed :is(.im-care-owners,.im-care-work) {animation:none!important;transform:none!important;opacity:1!important}
}
