/* Support04: an open white editorial layout and a comfortable service deck.
   Everything is readable in normal flow before progressive enhancement. */
.support4, .support4-dialog {
  --support4-bg: #fff;
  --support4-ink: #1d1d1f;
  --support4-muted: #6e6e73;
  --support4-caption: #6e6e73;
  --support4-surface: var(--neutral-surface);
  --support4-line: #e5e3e9;
  --support4-icon-bg: #ede7f5;
  --support4-icon-ink: #775595;
  /* Team Key approved palette-blush, shared by typography-key.js and cross-field.js. */
  --support4-soft-pink: #f9c1df;
  color: var(--support4-ink);
  color-scheme: light;
  font-family: 'Raleway', Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
}
.support4 *, .support4 *::before, .support4 *::after,
.support4-dialog *, .support4-dialog *::before, .support4-dialog *::after { box-sizing: border-box; }
.support4 :where(h2, h3, p), .support4-dialog :where(h2, h3, p, ul) { margin: 0; }
.support4 :where(div, article), .support4-dialog :where(p, li) { min-width: 0; }
.support4 { padding: 112px 0 108px; background: var(--support4-bg); overflow-x: clip; }
.support4-shell { width: calc(100% - var(--gutter) * 2); margin-inline: auto; }
.support4-inner {
  display: grid;
  grid-template-columns: repeat(var(--site-grid-columns), minmax(0, 1fr));
  column-gap: var(--site-grid-gap);
  row-gap: 48px;
  align-items: start;
}
.support4-eyebrow {
  grid-column: 1 / span 2;
  grid-row: 1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-top: 24px;
  color: var(--support4-muted);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .015em;
  line-height: 1.45;
}
.support4-number { color: var(--support4-caption); font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; white-space: nowrap; }
.support4-copy { grid-column: 3 / -1; grid-row: 1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; align-items: start; }
.support4-copy > .support4-title { grid-column: 1; grid-row: 1 / span 2; }
.support4-copy > .support4-description { grid-column: 2; margin-top: 0 !important; }
.support4-copy > .support4-button, .support4-copy > noscript { grid-column: 2; justify-self: start; }
.support4-title { max-width: 100%; color: #1d1d1f; font-family: 'Raleway', Arial, sans-serif; font-size: clamp(54px, 5.5vw, 64px); font-weight: 600; line-height: 1.06; letter-spacing: -.04em; }
.support4-title > span { color: var(--support4-muted); white-space: normal; }
@media (min-width: 1100px) {
  .support4-title > span { white-space: nowrap; }
}
@media (max-width: 1099px) {
  .support4-title .desktop-only { display: none; }
}
.support4-description { max-width: 620px; margin-top: 28px !important; color: var(--support4-muted); font-family: 'Raleway', Arial, sans-serif; font-size: 20px; line-height: 1.6; font-weight: 400; letter-spacing: normal; }
.support4-copy > .support4-button, .support4-nojs { margin-top: 34px !important; }
.support4-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 999px;
  padding: 15px 24px;
  background: #1d1d1f;
  color: #fff;
  font-family: 'Raleway', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background .2s ease, transform .2s ease;
}
.support4-button--secondary { border: 1px solid #96969c; background: transparent; color: var(--support4-ink); }
.support4-button[hidden], .support4-controls[hidden], .support4-intro-cta[hidden] { display: none; }
.support4-chevron { display: block; flex: 0 0 19px; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.support4-chevron--back { transform: rotate(180deg); }
.support4-button:focus-visible, .support4-dialog-close:focus-visible,
.support4-nav:focus-visible, .support4-dot:focus-visible, .support4-intro-cta:focus-visible,
.support4-viewport:focus-visible, .support4-card:focus-visible { outline: 3px solid #8965b0; outline-offset: 5px; }
.support4-button:active { transform: scale(.98); }
.support4-summary { grid-column: 3 / span 8; grid-row: 1; width: 100%; }
.support4-carousel { width: 100%; }
.support4-viewport { --support4-stage-gap: var(--site-grid-gap); position: relative; display: grid; gap: 18px; overflow: visible; }
.support4-card {
  --card-padding: 36px;
  --sla-top-height: 38px;
  --sla-title-gap: 36px;
  --sla-copy-gap: 8px;
  --sla-copy-bottom-gap: 12px;
  --sla-bottom-offset: 14px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: clamp(500px, 29vw, 600px);
  padding: var(--card-padding);
  border: 1px solid #1d1d1f05;
  border-radius: 32px;
  background: var(--support4-surface);
}
.support4-card-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: var(--sla-top-height, 38px); margin-bottom: var(--sla-title-gap, 12px); }
.support4-card-kind { color: var(--support4-muted); font-size: 14px; font-weight: 500; line-height: 1.4; }
.support4-icon { display: block; width: 44px; height: 44px; flex: 0 0 44px; padding: 11px; border-radius: 14px; background: var(--support4-icon-bg); color: var(--support4-icon-ink); }
.support4-icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.support4-card h3 { color: var(--support4-ink); font-size: clamp(28px, 2.0vw, 36px); font-weight: 600; line-height: 1.15; letter-spacing: -.025em; max-width: min(82%, 390px); }
.support4-card-copy { max-width: min(82%, 390px); width: 100%; margin-top: var(--sla-copy-gap, 8px) !important; margin-bottom: var(--sla-copy-bottom-gap, 12px) !important; color: var(--support4-muted); font-size: 15px; line-height: 1.45; }
.support4-card-note,
.support4-card-action { margin-top: auto !important; margin-bottom: 0 !important; padding-top: 36px !important; min-height: 36px; display: flex; align-items: flex-end; }
.support4-card-note { color: var(--support4-muted); font-size: 13.5px; line-height: 1.4; max-width: min(65%, 290px); }
.support4-card-action .support4-button { gap: 10px; padding-inline: 36px !important; font-size: 14px; height: 40px; }
/* Broad light fields, with a cool reading area and warm reflected light at
   the art edge. The object and its original material stay independent. */
.support4-card--intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: transparent;
  background:
    radial-gradient(ellipse 27% 38% at 75% -3%, #eef0ff80 0%, #eef0ff00 78%),
    radial-gradient(ellipse 36% 56% at 98% -8%, #f5cef4 0%, #f5cef400 82%),
    radial-gradient(ellipse 53% 105% at 108% 51%, #fddef2 28%, #fddef294 55%, #fddef200 90%),
    radial-gradient(ellipse 42% 50% at 82% 112%, #b9d4fc9c 0%, #b9d4fc00 82%),
    radial-gradient(ellipse 68% 86% at 49% 114%, #c6a6ef 0%, #c6a6ef00 82%),
    radial-gradient(ellipse 62% 78% at 48% -18%, #a6c3fc 0%, #90b8faad 42%, #90b8fa00 84%),
    radial-gradient(ellipse 62% 110% at -12% 57%, #7583c37a 0%, #7583c300 82%),
    linear-gradient(120deg, #7c94eb 0%, #9ba0f3 34%, #c2b2ee 66%, #e1cffc 100%);
  color: #fff;
  cursor: pointer;
}
.support4-card--intro .support4-card-top,
.support4-card--intro h3,
.support4-card--intro .support4-card-copy,
.support4-intro-cta { position: relative; z-index: 2; }
.support4-card--intro .support4-card-top { margin-bottom: 36px; }
.support4-card--intro h3, .support4-card--intro .support4-card-kind,
.support4-card--intro .support4-card-copy { color: #fff; }
.support4-card--intro h3 { max-width: 78%; font-size: clamp(44px, 3.35vw, 78px); font-weight: 650; line-height: 1.02; letter-spacing: .005em; }
.support4-card--intro .support4-card-kind { font-size: 15px; }
.support4-card--intro .support4-card-copy { max-width: min(48%, 440px); margin-top: 24px !important; font-size: clamp(16px, .9vw, 18px); line-height: 1.55; }
.support4-intro-footer { display: flex; align-items: flex-end; min-height: 44px; margin-top: auto !important; padding-top: 24px; }
.support4-intro-cta { display: inline-flex; align-items: center; gap: 12px; min-height: 54px; padding: 15px 24px; border: 0; border-radius: 999px; background: #fff; color: var(--support4-ink); font: 600 16px/1.4 'Raleway', Arial, sans-serif; cursor: pointer; touch-action: manipulation; }
.support4-intro-cta span { opacity: 1; transition: opacity 250ms ease; }
.support4-intro-cta svg { transition: transform 350ms cubic-bezier(.22,.8,.2,1); }
.support4-intro-cta:focus-visible { outline-color: #fff; }
.support4-intro-art { position: absolute; right: -8%; top: 8%; width: 58.5%; max-width: 756px; height: auto; object-fit: contain; pointer-events: none; z-index: 1; transform-origin: 56% 58%; transition: transform 440ms cubic-bezier(.22,.8,.2,1); }
/* Hidden slides still establish the intrinsic grid row height. They are
   invisible, inert and aria-hidden, so no off-screen link receives focus.
   This avoids JS measurements and card-height jumps after fonts/zoom/resize. */
.support4-carousel[data-support-enhanced="true"] .support4-viewport { gap: 0; isolation: isolate; overflow: visible; touch-action: pan-y pinch-zoom; }
.support4-carousel[data-support-enhanced="true"] .support4-card { grid-area: 1 / 1; }
.support4-carousel[data-support-enhanced="true"] .support4-card[aria-hidden="true"] { visibility: hidden; pointer-events: none; }
.support4-carousel[data-support-enhanced="true"] .support4-card[aria-hidden="false"] { z-index: 1; }
/* The outgoing layer is visual only; its aria-hidden/inert state is already
   committed. Persistent receiver nodes keep their intrinsic geometry. */
.support4-carousel[data-support-enhanced="true"] .support4-card[data-support-layer="outgoing"] { visibility: visible; z-index: 1; pointer-events: none; }
.support4-carousel[data-support-enhanced="true"] .support4-card[data-support-layer="incoming"] { z-index: 2; }
.support4-card[data-support-layer],
.support4-carousel[data-support-transition] .support4-card[data-support-preview] { will-change: transform, opacity; }
.support4-carousel[data-support-transition="previous"] .support4-card[data-support-layer="incoming"] { z-index: 1; }
.support4-carousel[data-support-transition="previous"] .support4-card[data-support-layer="outgoing"] { z-index: 2; }
.support4-carousel[data-support-enhanced="true"] .support4-card[data-support-preview="true"] {
  visibility: visible;
  transform: translateX(calc(100% + var(--support4-stage-gap)));
  z-index: 0;
}
.support4-preview-next { position: absolute; left: calc(100% + var(--support4-stage-gap)); top: 0; width: 100%; height: 100%; z-index: 3; border: 0; border-radius: 32px; padding: 0; background: transparent; cursor: pointer; touch-action: pan-y pinch-zoom; }
.support4-preview-next[hidden] { display: none; }
.support4-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; margin-top: 20px; }
.support4-pagination { grid-column: 1; justify-self: start; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0 8px; }
.support4-navigation { grid-column: 2; justify-self: end; display: flex; align-items: center; gap: 8px; }
.support4-nav { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; padding: 0; border: 0; border-radius: 50%; background: #f1f1f3; color: #424249; cursor: pointer; touch-action: manipulation; transition: background .2s, color .2s; }
.support4-nav[aria-disabled="true"] { color: #b0b0b8; cursor: default; }
.support4-dots { display: flex; align-items: center; gap: 0; }
.support4-dot { display: grid; place-items: center; width: 32px; height: 44px; padding: 0; border: 0; border-radius: 12px; color: inherit; background: transparent; cursor: pointer; touch-action: manipulation; }
.support4-dot > span { display: block; width: 7px; height: 7px; border-radius: 99px; background: #8a8a93; transition: width 260ms ease, background 260ms ease; }
.support4-dot[aria-pressed="true"] > span { width: 30px; background: var(--support4-soft-pink); }
.support4-count { min-width: 36px; color: var(--support4-muted); font-size: 14px; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; white-space: nowrap; }
.support4-announcer, .support4-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The section stays in document flow; only its separate dialog is fixed. */
.support4-dialog {
  position: fixed;
  inset: 0;
  z-index: 120;
  box-sizing: border-box;
  width: min(620px, calc(100% - 32px));
  max-width: calc(100% - 32px);
  height: fit-content;
  max-height: calc(100vh - 40px);
  max-height: calc(100svh - 40px);
  overflow: auto;
  overscroll-behavior: contain;
  margin: auto;
  border: 1px solid #1d1d1f12;
  border-radius: 28px;
  padding: 44px 40px 36px;
  background: #fff;
  box-shadow: 0 24px 100px #17171a30;
}
.support4-dialog:not([open]) { display: none; }
.support4-dialog[open] { display: block; }
.support4-dialog::backdrop { background: #17171a55; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
.support4-dialog-close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; padding: 0; background: #f0f0f2; color: var(--support4-muted); font-family: 'Raleway', Arial, sans-serif; font-size: 27px; line-height: 1; cursor: pointer; touch-action: manipulation; }
.support4-dialog-eyebrow { display: block; padding-right: 32px; margin-bottom: 20px; color: var(--support4-muted); font-size: 14px; line-height: 1.5; }
.support4-dialog h2 { margin-bottom: 20px; color: var(--support4-ink); font-size: 32px; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.support4-dialog p { margin-bottom: 24px; color: var(--support4-muted); font-size: 17px; line-height: 1.65; }
.support4-tariffs { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--support4-line); }
.support4-tariffs h3 { margin-bottom: 12px; color: var(--support4-ink); font-size: 20px; font-weight: 600; line-height: 1.3; }
.support4-tariffs p { margin-bottom: 0; }
.support4-dialog ul { margin: 0 0 26px; padding-left: 22px; color: var(--support4-muted); font-size: 16px; line-height: 1.7; }
.support4-dialog li + li { margin-top: 12px; }
.support4-dialog li strong { color: var(--support4-ink); font-weight: 600; }
.support4-dialog .support4-button { font-size: 16px; }
.support4-modal-backdrop { position: fixed; inset: 0; z-index: 110; background: #17171a55; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
@media (hover: hover) {
  .support4-button:hover { background: #35353a; }
  .support4-button--secondary:hover { border-color: #6e6e73; background: #1d1d1f06; }
  .support4-dialog-close:hover { background: #e8e8ed; color: var(--support4-ink); }
  .support4-nav:not([aria-disabled="true"]):hover { background: #e8e8ed; color: var(--support4-ink); }
  .support4-dot:hover > span { background: var(--support4-soft-pink); }
  .support4-card--intro:hover .support4-intro-art { transform: scale(1.03); }
  .support4-intro-cta:hover span { opacity: 1; }
  .support4-intro-cta:hover svg { transform: translateX(3px); }
}
/* The header and deck share the same ten-column reading edge. */
@media (min-width: 1100px) {
  .support4-title { font-size: clamp(40px, 3.35vw, 64px); }
  .support4-title > span { white-space: normal; }
}
@media (max-width: 1099px) {
  .support4-inner { row-gap: 36px; }
  .support4-eyebrow, .support4-copy, .support4-summary { grid-column: 1 / -1; grid-row: auto; }
  .support4-copy { column-gap: 32px; }
  .support4-description { font-size: 18px; }
  .support4-summary { width: 86%; }
  .support4-card--intro h3 { font-size: clamp(48px, 5.8vw, 64px); }
  .support4-card--intro .support4-card-copy { max-width: 48%; }
  .support4-title > span { display: block; }
  .support4-intro-art { width: 59.4%; right: -9%; top: 24%; }
}
@media (max-width: 1000px) {
  .support4-title { font-size: clamp(44px, 6vw, 54px); }
}
@media (max-width: 900px) {
  .support4 { padding: 88px 0; }
}
@media (max-width: 900px) {
  .support4-copy { display: block; }
  .support4-copy > .support4-description { margin-top: 24px !important; }
  .support4-card--intro h3 { font-size: 48px; }
}
@media (max-width: 600px) {
  .support4 { padding: 72px 0; }
  .support4-summary { width: 90%; }
  .support4-dot { width: 30px; }
  .support4-title { font-size: clamp(34px, 8.3vw, 44px); }
  .support4-description { margin-top: 24px !important; }
  .support4-card { --card-padding: 24px; padding: var(--card-padding); min-height: 400px; border-radius: 24px; }
  .support4-card-top { margin-bottom: 36px; }
  .support4-card h3 { font-size: 30px; }
  .support4-card-copy { font-size: 17px; }
  .support4-card--intro { min-height: 560px; }
  .support4-card--intro .support4-card-top { margin-bottom: 34px; }
  .support4-card--intro h3 { max-width: 100%; font-size: clamp(34px, 9.2vw, 44px); }
  .support4-card--intro .support4-card-copy { max-width: 100%; margin-top: 20px !important; font-size: 15px; line-height: 1.5; }
  .support4-intro-footer { align-items: flex-start; margin-top: 0 !important; padding-top: 16px; padding-bottom: 150px; }
  .support4-intro-cta { gap: 9px; padding-inline: 16px; font-size: 14px; }
  .support4-intro-art { width: 94%; max-width: 400px; right: -16%; top: auto; bottom: -10%; }
  .support4-button { gap: 10px; padding-inline: 22px; }
  .support4-dialog { padding: 44px 22px 28px; }
  .support4-dialog h2 { font-size: 28px; }
}
@media (max-width: 360px) {
  .support4-controls { align-items: start; column-gap: 12px; }
  .support4-dot { width: 30px; }
  .support4-count { flex-basis: 100%; padding-left: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .support4-button, .support4-nav, .support4-intro-cta span, .support4-intro-cta svg, .support4-intro-art, .support4-dot > span { transition: none; }
  .support4-button:active, .support4-intro-cta:hover svg, .support4-card--intro:hover .support4-intro-art { transform: none; }
}