/* v210: shared homepage card geometry and theme-aware concept offer. */

html[data-theme] {
  --home-card-accent: #49c6cf;
  --home-card-title-bg: rgba(10, 23, 36, .94);
  --home-card-copy-bg: rgba(9, 20, 33, .92);
  --home-card-title-ink: #f8fbff;
  --home-card-copy: #dce7ef;
  --home-card-muted: #b9c8d4;
  --home-card-price: #ffe39a;
  --home-card-badge-bg: rgba(255, 227, 154, .16);
  --home-card-badge-ink: #ffe9ad;
  --home-card-border: rgba(73, 198, 207, .5);
  --home-card-shadow: 0 22px 48px rgba(2, 8, 16, .38);
  --home-card-veil-rgb: 7, 18, 29;
  --home-card-art-glow: rgba(84, 209, 213, .2);

  --concept-popup-bg: linear-gradient(160deg, rgba(17, 33, 49, .99), rgba(9, 20, 33, .99));
  --concept-popup-ink: #f8fbff;
  --concept-popup-copy: #d8e4ed;
  --concept-popup-muted: #b6c4cf;
  --concept-popup-accent: #54d1d5;
  --concept-popup-accent-2: #f3cb75;
  --concept-popup-kicker: #ffe39a;
  --concept-popup-border: rgba(84, 209, 213, .48);
  --concept-popup-soft: rgba(255, 255, 255, .075);
  --concept-popup-close: rgba(255, 255, 255, .09);
  --concept-popup-close-hover: rgba(84, 209, 213, .2);
  --concept-popup-button: linear-gradient(135deg, #177783, #279ea7 62%, #246f9f);
  --concept-popup-button-hover: linear-gradient(135deg, #1d8994, #35b6bb 58%, #3184b4);
  --concept-popup-button-ink: #ffffff;
  --concept-popup-shadow: 0 26px 64px rgba(0, 7, 15, .46);
}

html[data-theme="solar"] {
  --home-card-accent: #f2b45d;
  --home-card-title-bg: rgba(43, 27, 16, .95);
  --home-card-copy-bg: rgba(36, 23, 15, .93);
  --home-card-copy: #f6e5cf;
  --home-card-muted: #ddc6aa;
  --home-card-price: #ffd68c;
  --home-card-badge-bg: rgba(242, 180, 93, .18);
  --home-card-badge-ink: #ffe2aa;
  --home-card-border: rgba(242, 180, 93, .55);
  --home-card-veil-rgb: 42, 26, 15;
  --home-card-art-glow: rgba(242, 180, 93, .22);
  --concept-popup-bg: linear-gradient(160deg, rgba(51, 31, 18, .99), rgba(31, 20, 15, .99));
  --concept-popup-copy: #f1dfc8;
  --concept-popup-muted: #d8c1a5;
  --concept-popup-accent: #f2b45d;
  --concept-popup-accent-2: #ef7e66;
  --concept-popup-border: rgba(242, 180, 93, .52);
  --concept-popup-soft: rgba(255, 230, 196, .08);
  --concept-popup-button: linear-gradient(135deg, #a65337, #d1774d 58%, #c09142);
  --concept-popup-button-hover: linear-gradient(135deg, #bc6242, #e08b5f 58%, #d0a14f);
}

html[data-theme="midnight"] {
  --home-card-accent: #6cb4ff;
  --home-card-title-bg: rgba(8, 23, 42, .96);
  --home-card-copy-bg: rgba(7, 19, 35, .94);
  --home-card-copy: #d7e7f6;
  --home-card-muted: #adc5dc;
  --home-card-price: #8ed0ff;
  --home-card-badge-bg: rgba(108, 180, 255, .16);
  --home-card-badge-ink: #bfe0ff;
  --home-card-border: rgba(108, 180, 255, .5);
  --home-card-veil-rgb: 6, 22, 40;
  --home-card-art-glow: rgba(108, 180, 255, .22);
  --concept-popup-bg: linear-gradient(160deg, rgba(11, 31, 55, .99), rgba(5, 19, 35, .99));
  --concept-popup-copy: #d5e7f8;
  --concept-popup-muted: #a9c1d8;
  --concept-popup-accent: #6cb4ff;
  --concept-popup-accent-2: #71e0d8;
  --concept-popup-border: rgba(108, 180, 255, .5);
  --concept-popup-soft: rgba(145, 198, 255, .08);
  --concept-popup-button: linear-gradient(135deg, #265f9f, #327fc0 58%, #23999f);
  --concept-popup-button-hover: linear-gradient(135deg, #2e71b9, #3d91d3 58%, #29adb2);
}

html[data-theme="nebula"] {
  --home-card-accent: #d990e4;
  --home-card-title-bg: rgba(38, 18, 52, .95);
  --home-card-copy-bg: rgba(30, 14, 44, .93);
  --home-card-copy: #eee0f4;
  --home-card-muted: #ceb9d9;
  --home-card-price: #ffc2ed;
  --home-card-badge-bg: rgba(217, 144, 228, .16);
  --home-card-badge-ink: #f5c9ff;
  --home-card-border: rgba(217, 144, 228, .5);
  --home-card-veil-rgb: 34, 16, 48;
  --home-card-art-glow: rgba(217, 144, 228, .22);
  --concept-popup-bg: linear-gradient(160deg, rgba(45, 21, 60, .99), rgba(25, 13, 40, .99));
  --concept-popup-copy: #ecddf3;
  --concept-popup-muted: #cbb7d5;
  --concept-popup-accent: #d990e4;
  --concept-popup-accent-2: #66d6db;
  --concept-popup-border: rgba(217, 144, 228, .5);
  --concept-popup-soft: rgba(237, 187, 248, .08);
  --concept-popup-button: linear-gradient(135deg, #754099, #9b54aa 58%, #267f94);
  --concept-popup-button-hover: linear-gradient(135deg, #894caf, #b263c0 58%, #2f96aa);
}

html[data-theme="emerald"] {
  --home-card-accent: #55c998;
  --home-card-title-bg: rgba(10, 37, 28, .96);
  --home-card-copy-bg: rgba(8, 29, 23, .94);
  --home-card-copy: #d9eee5;
  --home-card-muted: #b2d2c3;
  --home-card-price: #a9efc9;
  --home-card-badge-bg: rgba(85, 201, 152, .16);
  --home-card-badge-ink: #bdf5d6;
  --home-card-border: rgba(85, 201, 152, .5);
  --home-card-veil-rgb: 7, 32, 24;
  --home-card-art-glow: rgba(85, 201, 152, .22);
  --concept-popup-bg: linear-gradient(160deg, rgba(13, 45, 34, .99), rgba(7, 28, 23, .99));
  --concept-popup-copy: #d9eee5;
  --concept-popup-muted: #add0bf;
  --concept-popup-accent: #55c998;
  --concept-popup-accent-2: #e2c56f;
  --concept-popup-border: rgba(85, 201, 152, .5);
  --concept-popup-soft: rgba(132, 226, 184, .08);
  --concept-popup-button: linear-gradient(135deg, #217153, #329369 58%, #447e75);
  --concept-popup-button-hover: linear-gradient(135deg, #288763, #3cab7b 58%, #51958a);
}

html[data-theme="crimson"] {
  --home-card-accent: #ee8c8c;
  --home-card-title-bg: rgba(48, 18, 24, .96);
  --home-card-copy-bg: rgba(37, 13, 20, .94);
  --home-card-copy: #f2dfe2;
  --home-card-muted: #d6b7bd;
  --home-card-price: #ffc1b7;
  --home-card-badge-bg: rgba(238, 140, 140, .16);
  --home-card-badge-ink: #ffd0c8;
  --home-card-border: rgba(238, 140, 140, .52);
  --home-card-veil-rgb: 42, 15, 22;
  --home-card-art-glow: rgba(238, 140, 140, .2);
  --concept-popup-bg: linear-gradient(160deg, rgba(57, 22, 28, .99), rgba(32, 12, 19, .99));
  --concept-popup-copy: #f0dce0;
  --concept-popup-muted: #d2b3b9;
  --concept-popup-accent: #ee8c8c;
  --concept-popup-accent-2: #e9c66f;
  --concept-popup-border: rgba(238, 140, 140, .52);
  --concept-popup-soft: rgba(255, 177, 177, .08);
  --concept-popup-button: linear-gradient(135deg, #9b3f4f, #bd5661 58%, #9d624e);
  --concept-popup-button-hover: linear-gradient(135deg, #b2495a, #d16570 58%, #b4745c);
}

html[data-theme="light"] {
  --home-card-title-ink: #17232d;
  --home-card-copy: #263740;
  --home-card-muted: #52636d;
  --home-card-price: #28451f;
  --home-card-badge-ink: #28451f;
  --concept-popup-bg: linear-gradient(155deg, rgba(15, 34, 49, .995), rgba(35, 24, 53, .995));
  --concept-popup-ink: #f8fbff;
  --concept-popup-copy: #dce8ee;
  --concept-popup-muted: #b9c8d0;
  --concept-popup-accent: #54d1d5;
  --concept-popup-accent-2: #f3cb75;
  --concept-popup-kicker: #ffe39a;
  --concept-popup-border: rgba(84, 209, 213, .56);
  --concept-popup-soft: rgba(255, 255, 255, .08);
  --concept-popup-close: rgba(255, 255, 255, .08);
  --concept-popup-close-hover: rgba(84, 209, 213, .2);
  --concept-popup-button: linear-gradient(135deg, #177783, #279ea7 62%, #4c6fa6);
  --concept-popup-button-hover: linear-gradient(135deg, #1d8994, #35b6bb 58%, #5c80ba);
  --concept-popup-button-ink: #ffffff;
  --concept-popup-shadow: 0 28px 68px rgba(23, 35, 45, .34);
}

/* Invert the popup against dark pages so the offer cannot disappear into the card field. */
html[data-theme]:not([data-theme="light"]) {
  --concept-popup-bg: linear-gradient(160deg, rgba(255, 253, 247, .995), rgba(232, 246, 246, .995));
  --concept-popup-ink: #12222d;
  --concept-popup-copy: #314751;
  --concept-popup-muted: #566b75;
  --concept-popup-kicker: #745121;
  --concept-popup-soft: rgba(18, 111, 117, .08);
  --concept-popup-close: rgba(18, 34, 45, .07);
  --concept-popup-close-hover: rgba(18, 111, 117, .14);
  --concept-popup-shadow: 0 28px 68px rgba(0, 7, 15, .52), 0 0 0 1px rgba(255, 255, 255, .35);
}

html[data-theme][data-theme="solar"]:not([data-theme="light"]) {
  --concept-popup-bg: linear-gradient(160deg, rgba(255, 249, 238, .995), rgba(247, 231, 210, .995));
}

html[data-theme][data-theme="midnight"]:not([data-theme="light"]) {
  --concept-popup-bg: linear-gradient(160deg, rgba(244, 250, 255, .995), rgba(225, 240, 250, .995));
}

html[data-theme][data-theme="nebula"]:not([data-theme="light"]) {
  --concept-popup-bg: linear-gradient(160deg, rgba(255, 247, 255, .995), rgba(239, 226, 248, .995));
}

html[data-theme][data-theme="emerald"]:not([data-theme="light"]) {
  --concept-popup-bg: linear-gradient(160deg, rgba(245, 255, 249, .995), rgba(226, 245, 236, .995));
}

html[data-theme][data-theme="crimson"]:not([data-theme="light"]) {
  --concept-popup-bg: linear-gradient(160deg, rgba(255, 247, 247, .995), rgba(248, 229, 233, .995));
}

/* Match the successful Light layout in every dark theme while preserving dark art. */
html[data-theme]:not([data-theme="light"]) body main .showcase-service-grid {
  display: grid !important;
  flex-wrap: initial !important;
  justify-content: initial !important;
}

html[data-theme]:not([data-theme="light"]) body main .showcase-service-card {
  flex: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  justify-self: stretch !important;
  border: 1px solid var(--home-card-border) !important;
  background:
    linear-gradient(
      180deg,
      rgba(var(--home-card-veil-rgb), .28) 0%,
      rgba(var(--home-card-veil-rgb), .08) 48%,
      rgba(var(--home-card-veil-rgb), .38) 100%
    ),
    var(--tile-image) center / cover no-repeat !important;
  background-color: rgb(var(--home-card-veil-rgb)) !important;
  background-blend-mode: normal !important;
  box-shadow: var(--home-card-shadow) !important;
  filter: none !important;
}

html[data-theme]:not([data-theme="light"]) body main .showcase-service-card::before {
  background:
    linear-gradient(180deg, rgba(var(--home-card-veil-rgb), .14), transparent 42%, rgba(var(--home-card-veil-rgb), .1)),
    radial-gradient(circle at 78% 18%, var(--home-card-art-glow), transparent 36%) !important;
  opacity: .58 !important;
}

html[data-theme]:not([data-theme="light"]) body main .showcase-service-card::after {
  background: linear-gradient(110deg, transparent 34%, rgba(255, 255, 255, .16), transparent 64%) !important;
  opacity: .66 !important;
}

html[data-theme]:not([data-theme="light"])[data-theme] body main section.home-hero-showcase .showcase-hero-shell .showcase-service-grid .showcase-service-card > span {
  width: fit-content !important;
  max-width: min(100%, 13ch) !important;
  padding: .38em .56em !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-left: 4px solid var(--home-card-accent) !important;
  border-radius: 8px !important;
  background: var(--home-card-title-bg) !important;
  color: var(--home-card-title-ink) !important;
  -webkit-text-fill-color: var(--home-card-title-ink) !important;
  font-size: clamp(1.28rem, 2.15vw, 2rem) !important;
  line-height: 1.02 !important;
  text-shadow: none !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .07) !important;
  backdrop-filter: blur(10px) saturate(1.06);
}

html[data-theme]:not([data-theme="light"])[data-theme] body main section.home-hero-showcase .showcase-hero-shell .showcase-service-grid .showcase-service-card > small {
  width: fit-content !important;
  max-width: min(100%, 34ch) !important;
  margin-top: auto !important;
  padding: .62em .74em !important;
  border: 1px solid rgba(255, 255, 255, .13) !important;
  border-radius: 8px !important;
  background: var(--home-card-copy-bg) !important;
  color: var(--home-card-copy) !important;
  -webkit-text-fill-color: var(--home-card-copy) !important;
  font-size: clamp(.76rem, .95vw, .94rem) !important;
  line-height: 1.32 !important;
  text-shadow: none !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .06) !important;
  backdrop-filter: blur(10px) saturate(1.04);
}

html[data-theme][data-theme] body main section.home-hero-showcase .showcase-hero-shell .showcase-service-grid .showcase-service-card.growth > small {
  display: grid !important;
  gap: 6px !important;
  width: min(100%, 43ch) !important;
  max-width: min(100%, 43ch) !important;
}

html[data-theme][data-theme] body main section.home-hero-showcase .showcase-hero-shell .showcase-service-grid .showcase-service-card.growth > small > .revamp-card-intro {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--home-card-copy) !important;
  -webkit-text-fill-color: var(--home-card-copy) !important;
  font: inherit !important;
  line-height: inherit !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html[data-theme][data-theme] body main section.home-hero-showcase .showcase-hero-shell .showcase-service-grid .showcase-service-card.growth > small > .revamp-card-price-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--home-card-copy) !important;
  -webkit-text-fill-color: var(--home-card-copy) !important;
  font: inherit !important;
  line-height: inherit !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html[data-theme] body main .showcase-service-card.growth .revamp-card-price-row > b {
  color: var(--home-card-copy) !important;
  -webkit-text-fill-color: var(--home-card-copy) !important;
  font-size: .78rem !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

html[data-theme] body main .showcase-service-card.growth .revamp-card-price-row .revamp-inline-offer {
  justify-content: flex-end !important;
  margin: 0 !important;
}

html[data-theme]:not([data-theme="light"]) body main .showcase-service-card:is(:hover, :focus-visible) {
  border-color: var(--home-card-accent) !important;
  box-shadow: 0 28px 58px rgba(0, 0, 0, .44), 0 0 0 1px var(--home-card-border) !important;
}

html[data-theme]:not([data-theme="light"]) body main .showcase-service-card:focus-visible {
  outline: 3px solid var(--home-card-accent) !important;
  outline-offset: 4px !important;
}

@media (min-width: 1200px) {
  html[data-theme]:not([data-theme="light"]) body main .showcase-service-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    max-width: 1280px !important;
  }

  html[data-theme]:not([data-theme="light"]) body main .showcase-service-grid .showcase-service-card.growth {
    grid-column: span 2 !important;
  }
}

@media (min-width: 761px) and (max-width: 1199px) {
  html[data-theme]:not([data-theme="light"]) body main .showcase-service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html[data-theme]:not([data-theme="light"]) body main .showcase-service-grid .showcase-service-card.growth {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 760px) {
  html[data-theme]:not([data-theme="light"]) body main .showcase-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  html[data-theme]:not([data-theme="light"]) body main .showcase-service-grid .showcase-service-card.growth {
    grid-column: 1 / -1 !important;
  }

  html[data-theme]:not([data-theme="light"])[data-theme] body main section.home-hero-showcase .showcase-hero-shell .showcase-service-grid .showcase-service-card > span {
    max-width: 11ch !important;
    padding: .34em .48em !important;
    border-left-width: 3px !important;
    border-radius: 7px !important;
    font-size: clamp(1.02rem, 4.8vw, 1.38rem) !important;
  }

  html[data-theme]:not([data-theme="light"])[data-theme] body main section.home-hero-showcase .showcase-hero-shell .showcase-service-grid .showcase-service-card > small {
    max-width: 100% !important;
    padding: .48em .56em !important;
    border-radius: 7px !important;
    font-size: clamp(.62rem, 2.45vw, .75rem) !important;
    line-height: 1.24 !important;
  }

  html[data-theme][data-theme] body main section.home-hero-showcase .showcase-hero-shell .showcase-service-grid .showcase-service-card.growth > small {
    width: 100% !important;
    max-width: 100% !important;
    gap: 5px !important;
  }

  html[data-theme] body main .showcase-service-card.growth .revamp-card-price-row {
    gap: 6px !important;
  }
}

/* Theme-aware popup: same information, clearer hierarchy and interaction. */
html[data-theme] body .three-concept-popup[hidden] {
  display: none !important;
}

html[data-theme] body .three-concept-popup-card {
  --concept-popup-button-current: var(--concept-popup-button);
  position: relative !important;
  isolation: isolate !important;
  display: block !important;
  padding: 20px !important;
  overflow: hidden !important;
  border: 1px solid var(--concept-popup-border) !important;
  border-radius: 8px !important;
  background: var(--concept-popup-bg) !important;
  color: var(--concept-popup-ink) !important;
  -webkit-text-fill-color: var(--concept-popup-ink) !important;
  box-shadow: var(--concept-popup-shadow) !important;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}

html[data-theme] body .three-concept-popup-card::before {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 0 auto !important;
  width: auto !important;
  height: 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg, var(--concept-popup-accent), var(--concept-popup-accent-2)) !important;
  box-shadow: none !important;
}

html[data-theme] body .three-concept-popup-card:is(:hover, :focus-visible) {
  --concept-popup-button-current: var(--concept-popup-button-hover);
  border-color: var(--concept-popup-accent) !important;
  box-shadow: 0 30px 72px rgba(0, 7, 15, .52), 0 0 0 1px var(--concept-popup-border) !important;
  transform: translateY(-3px) !important;
}

html[data-theme="light"] body .three-concept-popup-card:is(:hover, :focus-visible) {
  box-shadow: 0 30px 68px rgba(23, 35, 45, .28), 0 0 0 1px var(--concept-popup-border) !important;
}

html[data-theme] body .three-concept-popup-card:focus-visible {
  outline: 3px solid var(--concept-popup-accent) !important;
  outline-offset: 4px !important;
}

html[data-theme] body .three-concept-popup-content {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  gap: 12px !important;
  color: var(--concept-popup-ink) !important;
  -webkit-text-fill-color: var(--concept-popup-ink) !important;
}

html[data-theme] body .three-concept-kicker {
  padding: 5px 9px !important;
  border: 1px solid var(--concept-popup-border) !important;
  border-radius: 4px !important;
  background: var(--concept-popup-soft) !important;
  color: var(--concept-popup-kicker) !important;
  -webkit-text-fill-color: var(--concept-popup-kicker) !important;
  font-size: .7rem !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

html[data-theme] body .three-concept-popup-content > strong {
  max-width: 20ch !important;
  color: var(--concept-popup-ink) !important;
  -webkit-text-fill-color: var(--concept-popup-ink) !important;
  font-size: clamp(1.4rem, 4vw, 1.75rem) !important;
  line-height: 1.06 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-shadow: none !important;
}

html[data-theme] body .three-concept-trio {
  gap: 9px !important;
}

html[data-theme] body .three-concept-trio > span {
  border: 1px solid var(--concept-popup-border) !important;
  border-radius: 6px !important;
  box-shadow: 0 10px 24px rgba(0, 7, 15, .24) !important;
}

html[data-theme] body .three-concept-copy {
  color: var(--concept-popup-copy) !important;
  -webkit-text-fill-color: var(--concept-popup-copy) !important;
  font-size: .93rem !important;
  line-height: 1.48 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-shadow: none !important;
}

html[data-theme] body .three-concept-cta {
  min-height: 46px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--concept-popup-border) !important;
  border-radius: 6px !important;
  background: var(--concept-popup-button-current) !important;
  color: var(--concept-popup-button-ink) !important;
  -webkit-text-fill-color: var(--concept-popup-button-ink) !important;
  font-size: .96rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-shadow: none !important;
  box-shadow: 0 12px 28px rgba(0, 7, 15, .28) !important;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}

html[data-theme] body .three-concept-popup-card:is(:hover, :focus-visible) .three-concept-cta {
  transform: translateY(-2px) !important;
  border-color: var(--concept-popup-accent) !important;
  box-shadow: 0 16px 34px rgba(0, 7, 15, .36) !important;
}

html[data-theme] body .three-concept-cta > span {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  font-size: 1.08rem !important;
  transition: transform .2s ease !important;
}

html[data-theme] body .three-concept-popup-card:is(:hover, :focus-visible) .three-concept-cta > span {
  transform: translateX(4px) !important;
}

html[data-theme] body .three-concept-note {
  padding-top: 2px !important;
  color: var(--concept-popup-muted) !important;
  -webkit-text-fill-color: var(--concept-popup-muted) !important;
  font-size: .74rem !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-shadow: none !important;
}

html[data-theme] body .three-concept-popup .free-sample-popup-close {
  top: 10px !important;
  right: 10px !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border: 1px solid var(--concept-popup-border) !important;
  border-radius: 6px !important;
  background: var(--concept-popup-close) !important;
  color: var(--concept-popup-ink) !important;
  -webkit-text-fill-color: var(--concept-popup-ink) !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  box-shadow: 0 8px 20px rgba(0, 7, 15, .22) !important;
  transition: transform .18s ease, background .18s ease, border-color .18s ease !important;
}

html[data-theme] body .three-concept-popup .free-sample-popup-close::before {
  content: "\00d7" !important;
  color: var(--concept-popup-ink) !important;
  -webkit-text-fill-color: var(--concept-popup-ink) !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

html[data-theme] body .three-concept-popup .free-sample-popup-close:is(:hover, :focus-visible) {
  border-color: var(--concept-popup-accent) !important;
  background: var(--concept-popup-close-hover) !important;
  transform: rotate(4deg) scale(1.04) !important;
}

html[data-theme] body .three-concept-popup .free-sample-popup-close:focus-visible {
  outline: 3px solid var(--concept-popup-accent) !important;
  outline-offset: 3px !important;
}

@media (max-width: 760px) {
  html[data-theme] body .three-concept-popup-card {
    padding: 18px !important;
  }

  html[data-theme] body .three-concept-popup-content > strong {
    max-width: calc(100% - 44px) !important;
    font-size: clamp(1.3rem, 7vw, 1.62rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] body .three-concept-popup-card,
  html[data-theme] body .three-concept-cta,
  html[data-theme] body .three-concept-cta > span,
  html[data-theme] body .three-concept-popup .free-sample-popup-close {
    transition: none !important;
  }

  html[data-theme] body .three-concept-popup-card:is(:hover, :focus-visible),
  html[data-theme] body .three-concept-popup-card:is(:hover, :focus-visible) .three-concept-cta,
  html[data-theme] body .three-concept-popup-card:is(:hover, :focus-visible) .three-concept-cta > span,
  html[data-theme] body .three-concept-popup .free-sample-popup-close:is(:hover, :focus-visible) {
    transform: none !important;
  }
}