/* Scoped to the three get-started variants: #non-twp-countries, #twp-30-days, #twp-7-days */

/* Column split: remote box 53.5%, TeamViewer ONE box 46.5% in either order; stacked at <=1200px (AEM: .cmp-colcontrol--2) */
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .container-50-50 > .container-responsive { gap: 14px !important; }
@media (min-width: 1201px) {
  :is(#non-twp-countries, #twp-30-days, #twp-7-days) .container-50-50 > .container-responsive > :has(.tv-plans) { width: calc(53.5% - 7px) !important; }
  :is(#non-twp-countries, #twp-30-days, #twp-7-days) .container-50-50 > .container-responsive > :has(.tv-feature-grid) { width: calc(46.5% - 7px) !important; }
}
@media (max-width: 1200px) {
  :is(#non-twp-countries, #twp-30-days, #twp-7-days) .container-50-50 > .container-responsive { flex-direction: column !important; gap: 30px !important; }
  :is(#non-twp-countries, #twp-30-days, #twp-7-days) .container-50-50 > .container-responsive > * { width: 100% !important; }
}

/* Headings sit above the boxes: drop the container frame and frame the content below the heading instead */
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .container-50-50 > .container-responsive > *,
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .container-full-width,
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .container-full-width > .container-responsive > div { overflow: visible !important; }
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .container-full-width { border: 0 !important; border-radius: 0 !important; background: transparent !important; display: flex !important; flex-direction: column; }
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .container-full-width > .absolute { display: none !important; }
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .container-full-width > .container-responsive { flex: 1 1 auto; padding-top: 0 !important; }

/* Column headings (AEM: #remote-support-headline h4, #endpoint-mgmt-headline h4) */
:is(#non-twp-countries, #twp-30-days, #twp-7-days) #headline-remote,
:is(#non-twp-countries, #twp-30-days, #twp-7-days) #headline-tv-one { padding: 0 !important; margin: 0 0 40px !important; }
:is(#non-twp-countries, #twp-30-days, #twp-7-days) #headline-remote .basic-text,
:is(#non-twp-countries, #twp-30-days, #twp-7-days) #headline-tv-one .basic-text,
:is(#non-twp-countries, #twp-30-days, #twp-7-days) #headline-remote h4,
:is(#non-twp-countries, #twp-30-days, #twp-7-days) #headline-tv-one h4 { margin: 0 !important; line-height: 1.3 !important; }

/* Remote box (AEM: #remote-support-options) — stretched so the CTAs sit on the box bottom */
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .brand-root:has(.tv-plans) { border: 1px solid #d8d8d8; border-radius: 8px; background: #fff; }
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .brand-root:has(.tv-plans),
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .brand-root:has(.tv-plans) > section,
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .brand-root:has(.tv-plans) .basic-text,
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .brand-root:has(.tv-plans) .basic-text > span,
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .brand-root:has(.tv-plans) .basic-text > span > span,
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .brand-root:has(.tv-plans) .ck-content { display: flex !important; flex-direction: column; flex: 1 1 auto; }
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .brand-root:has(.tv-plans) > section { padding: 30px 20px !important; }
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .brand-root:has(.tv-plans) .basic-text { margin-bottom: 0 !important; }
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .tv-plans-grid { flex: 1 1 auto; }

/* Plan columns divider — sits between the columns in either order (AEM: #remote-support-for-* / #general-remote-support-for-*) */
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .tv-plans-col + .tv-plans-col { border-color: #d8d8d8 !important; }
@container (min-width: 526px) {
  :is(#non-twp-countries, #twp-30-days, #twp-7-days) .tv-plans-col { padding-right: 18px !important; }
  :is(#non-twp-countries, #twp-30-days, #twp-7-days) .tv-plans-col + .tv-plans-col { padding-left: 18px !important; padding-right: 0 !important; }
}

/* List items (AEM: #remote-support-options li) */
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .tv-plans-col li { line-height: 1.5 !important; }
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .tv-plans-col li + li { margin-top: 16px !important; }

/* TeamViewer ONE box (AEM: #endpoint-mgmt-tmv-one.cmp-container--border-premium) — one frame drawn across its 3 sections */
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .brand-root:has(.tv-head-wrap),
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .brand-root:has(.tv-chk-wrap),
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .brand-root:has(#button-tmv-one) { display: flow-root; position: relative; border: 0 solid #3056ef; border-left-width: 1px; border-right-width: 1px;}
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .brand-root:has(.tv-head-wrap) { border-top-width: 1px; border-radius: 8px 8px 0 0; padding-top: 30px; }
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .brand-root:has(#button-tmv-one) { display: flex !important; flex-direction: column; flex: 1 1 auto; border-bottom-width: 1px; border-radius: 0 0 8px 8px; padding-bottom: 30px; }
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .brand-root:has(.tv-head-wrap) > section,
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .brand-root:has(.tv-chk-wrap) > section,
:is(#non-twp-countries, #twp-30-days, #twp-7-days) #button-tmv-one { padding-left: 24px !important; padding-right: 24px !important; }
:is(#non-twp-countries, #twp-30-days, #twp-7-days) #button-tmv-one { flex: 1 1 auto; display: flex !important; flex-direction: column; margin-bottom: 0 !important; }
:is(#non-twp-countries, #twp-30-days, #twp-7-days) #button-tmv-one > .w-auto { margin-top: auto; padding-top: 12px; }

/* Badge (AEM: .cmp-container--border-premium:before) */
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .brand-root:has(.tv-head-wrap)::before {
  content: "ALL-IN-ONE-PLATFORM";
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%); z-index: 10;
  min-width: 160px; padding: 6px 15px; border-radius: 4px;
  background: #3056ef; color: #fff; font-size: 12px; font-weight: 600; line-height: 1.2; text-align: center;
}

/* Solution tiles (AEM: #endpoint-mgmt-tmv-one-solutions) — RTE emits .tv-chk-sub as a sibling of .tv-chk-text, so grid stacks them next to the tick */
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .tv-chk-box { display: grid !important; grid-template-columns: 20px minmax(0, 1fr); gap: 0 12px !important; align-items: start !important; align-content: start; padding: 14px 10px !important; }
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .tv-chk-text { grid-column: 2; }

/* Feature grid: 2 columns, 1 on mobile (AEM: #endpoint-mgmt-tmv-one-features) */
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .tv-feature-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px 24px !important; }
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .tv-feature-grid + .ck-content{display: none;}
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .tv-feature-item { min-width: 0 !important; gap: 10px !important; align-items: flex-start !important; }
@media (max-width: 767px) {
  :is(#non-twp-countries, #twp-30-days, #twp-7-days) .tv-feature-grid { grid-template-columns: 1fr; }
}

/* Text colour (AEM: #131414) */
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .tv-plans-col h5,
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .tv-plans-col > p,
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .tv-plans-col li,
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .tv-head-title,
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .tv-head-sub,
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .tv-chk-text,
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .tv-feature-title,
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .tv-feature-desc { color: #131414 !important; }

/* Tooltip triggers (AEM: .tv-tooltip-target) */
:is(#non-twp-countries, #twp-30-days, #twp-7-days) [data-tip-kind="underline"] { text-decoration-style: solid !important; text-underline-offset: 1px !important; }

/* CTAs: label left, chevron right (AEM: #button-individuals, #button-teams, #button-tmv-one) */
:is(#non-twp-countries, #twp-30-days, #twp-7-days) .tv-plans-cta a,
:is(#non-twp-countries, #twp-30-days, #twp-7-days) #button-tmv-one a { max-width: 310px; }

/* Lead heading above the variants — only applies on a page that contains one of the three IDs (AEM: .leadparagraph h2) */
@media (min-width: 768px) {
  main:has(#non-twp-countries, #twp-30-days, #twp-7-days) .lead-paragraph h1 { font-size: 32px !important; line-height: 1.25 !important; }
}