.service-page[data-service-page="chatgpt"] .service-constructor-description,
.service-page[data-service-page="claude"] .service-constructor-description {
  display: none;
}

body.claude-onboarding-ready .chatgpt-onboarding-brief__mark,
body.claude-onboarding-ready .chatgpt-onboarding-step__number,
body.claude-onboarding-ready .chatgpt-onboarding-fit__list li > span,
body.claude-onboarding-ready .chatgpt-onboarding-modal__note > span {
  color: #ff9b72;
  background: rgba(255, 111, 63, 0.09);
}

body.claude-onboarding-ready .chatgpt-onboarding-step__number {
  border-color: rgba(255, 123, 75, 0.38);
}

body.claude-onboarding-ready .chatgpt-onboarding-modal__eyebrow,
body.claude-onboarding-ready .chatgpt-onboarding-fit__action,
body.claude-onboarding-ready .chatgpt-onboarding-brief__arrow {
  color: #ff9b72;
}

body.claude-onboarding-ready .chatgpt-onboarding-brief__details:hover,
body.claude-onboarding-ready .chatgpt-onboarding-brief__details:focus-visible {
  color: #ffc0a5;
  border-color: rgba(255, 132, 82, 0.34);
  background: rgba(255, 101, 48, 0.08);
}

body.claude-onboarding-ready .chatgpt-onboarding-modal__primary {
  color: #1a0903;
  background: linear-gradient(135deg, #ffae84, #f06432);
  box-shadow: 0 12px 26px rgba(240, 100, 50, 0.2);
}

/* The compact purchase guide replaces the legacy long-form block. */
body.chatgpt-onboarding-ready .service-info-section--chatgpt,
body.claude-onboarding-ready .service-info-section--claude {
  display: none !important;
}

.chatgpt-onboarding-brief {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 14px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.chatgpt-onboarding-brief__copy {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.chatgpt-onboarding-brief__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.chatgpt-onboarding-brief__text strong {
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  font-weight: 800;
}

.chatgpt-onboarding-brief__text small {
  color: rgba(255, 255, 255, 0.48);
  font-size: 11px;
  line-height: 1.4;
}

.chatgpt-onboarding-brief__mark {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 50%;
  color: #46e899;
  background: rgba(53, 242, 143, 0.08);
  font-size: 13px;
  font-weight: 900;
}

.chatgpt-onboarding-brief__details {
  display: inline-flex;
  min-height: 36px;
  padding: 0 13px;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.045);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: color 160ms ease, transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.chatgpt-onboarding-brief__details:hover,
.chatgpt-onboarding-brief__details:focus-visible {
  color: #a0f8cf;
  border-color: rgba(86, 238, 165, 0.32);
  background: rgba(48, 224, 143, 0.08);
  transform: translateY(-1px);
  outline: none;
}

.chatgpt-onboarding-brief__arrow {
  color: #62eaa8;
  font-size: 14px;
  transition: transform 160ms ease;
}

.chatgpt-onboarding-brief__details:hover .chatgpt-onboarding-brief__arrow,
.chatgpt-onboarding-brief__details:focus-visible .chatgpt-onboarding-brief__arrow {
  transform: translateX(2px);
}

body.chatgpt-onboarding-is-open {
  overflow: hidden;
}

.chatgpt-onboarding-modal[hidden] {
  display: none;
}

.chatgpt-onboarding-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 22px;
}

/* Dark service pages assign position:relative to every direct body child with
   a more specific selector. Keep onboarding as a true viewport overlay. */
html body:has(main.service-page) > .chatgpt-onboarding-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 3000 !important;
}

.chatgpt-onboarding-modal__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(4, 6, 9, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.chatgpt-onboarding-modal__dialog {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 28px);
  overflow: auto;
  padding: 25px 28px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 24px;
  color: #f5f6f7;
  background: linear-gradient(145deg, #20252c 0%, #161a20 58%, #111419 100%);
  box-shadow: 0 32px 86px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.chatgpt-onboarding-modal__dialog::-webkit-scrollbar {
  width: 5px;
}

.chatgpt-onboarding-modal__dialog::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.chatgpt-onboarding-modal__close {
  position: absolute;
  top: 17px;
  right: 17px;
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 13px;
  color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.035);
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
}

.chatgpt-onboarding-modal__close:hover,
.chatgpt-onboarding-modal__close:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  outline: none;
}

.chatgpt-onboarding-modal__eyebrow {
  display: block;
  margin-bottom: 9px;
  color: rgba(88, 232, 162, 0.88);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.chatgpt-onboarding-modal__dialog h2 {
  margin: 0;
  color: #fff;
  font-family: "Manrope", system-ui, sans-serif;
  font-size: clamp(27px, 4vw, 32px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.045em;
}

.chatgpt-onboarding-modal__lead {
  max-width: 410px;
  margin: 8px 0 16px;
  color: rgba(255, 255, 255, 0.58) !important;
  font-size: 13px;
  line-height: 1.55;
}

.chatgpt-onboarding-steps {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chatgpt-onboarding-step {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.chatgpt-onboarding-step:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.chatgpt-onboarding-step__number {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(59, 228, 148, 0.38);
  border-radius: 50%;
  color: #62e9a9;
  background: rgba(53, 242, 143, 0.07);
  font-size: 13px;
  font-weight: 900;
}

.chatgpt-onboarding-step__copy {
  display: grid;
  gap: 3px;
}

.chatgpt-onboarding-step__copy strong {
  color: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  font-weight: 800;
}

.chatgpt-onboarding-step__copy small {
  color: rgba(255, 255, 255, 0.52);
  font-size: 12px;
  line-height: 1.45;
}

.chatgpt-onboarding-fit {
  margin-top: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.025);
}

.chatgpt-onboarding-fit summary {
  display: flex;
  min-height: 52px;
  padding: 8px 12px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  list-style: none;
  cursor: pointer;
}

.chatgpt-onboarding-fit summary::-webkit-details-marker {
  display: none;
}

.chatgpt-onboarding-fit__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.chatgpt-onboarding-fit__summary > span:last-child,
.chatgpt-onboarding-fit__summary strong,
.chatgpt-onboarding-fit__summary small {
  display: block;
}

.chatgpt-onboarding-fit__summary strong {
  color: rgba(255, 255, 255, 0.84);
  font-size: 13px;
  font-weight: 800;
}

.chatgpt-onboarding-fit__summary small {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
}

.chatgpt-onboarding-fit__icon {
  display: grid !important;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 900;
}

.chatgpt-onboarding-fit__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(89, 233, 163, 0.86);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.chatgpt-onboarding-fit__action i {
  font-size: 14px;
  font-style: normal;
  transition: transform 160ms ease;
}

.chatgpt-onboarding-fit[open] .chatgpt-onboarding-fit__action i {
  transform: rotate(180deg);
}

.chatgpt-onboarding-fit__list {
  display: grid;
  gap: 0;
  margin: 0 13px;
  padding: 0 0 8px 40px;
  list-style: none;
}

.chatgpt-onboarding-fit__list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 7px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.065);
}

.chatgpt-onboarding-fit__list li > span {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  color: #4eeaa1;
  background: rgba(53, 242, 143, 0.07);
  font-size: 10px;
  font-weight: 900;
}

.chatgpt-onboarding-fit__list p,
.chatgpt-onboarding-fit__list strong,
.chatgpt-onboarding-fit__list small {
  display: block;
  margin: 0;
}

.chatgpt-onboarding-fit__list strong {
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  font-weight: 750;
}

.chatgpt-onboarding-fit__list small {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.43);
  font-size: 10.5px;
  line-height: 1.4;
}

.chatgpt-onboarding-modal__note {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  margin-top: 12px;
  padding: 10px 13px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.028);
}

.chatgpt-onboarding-modal__note > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  color: #4eeaa1;
  background: rgba(53, 242, 143, 0.08);
  font-weight: 900;
}

.chatgpt-onboarding-modal__note p,
.chatgpt-onboarding-modal__note small {
  display: block;
  margin: 0;
}

.chatgpt-onboarding-modal__note strong {
  color: rgba(255, 255, 255, 0.84);
  font-size: 13px;
}

.chatgpt-onboarding-modal__note small {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 11px;
}

.chatgpt-onboarding-modal__primary {
  width: 100%;
  min-height: 44px;
  margin-top: 13px;
  border: 0;
  border-radius: 15px;
  color: #06130d;
  background: linear-gradient(135deg, #4ceda2, #18bb72);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(24, 187, 114, 0.18);
  transition: transform 160ms ease, filter 160ms ease;
}

.chatgpt-onboarding-modal__primary:hover,
.chatgpt-onboarding-modal__primary:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.05);
  outline: none;
}

@media (max-width: 760px) {
  .chatgpt-onboarding-brief {
    align-items: flex-start;
    flex-direction: column;
    gap: 11px;
    margin-bottom: 12px;
    padding-block: 14px;
  }

  .chatgpt-onboarding-brief__details {
    min-height: 34px;
    margin-left: 41px;
  }
}

@media (max-width: 560px) {
  .chatgpt-onboarding-modal {
    align-items: end;
    padding: 10px;
  }

  .chatgpt-onboarding-modal__dialog {
    max-height: calc(100vh - 20px);
    padding: 25px 18px 18px;
    border-radius: 22px;
  }

  .chatgpt-onboarding-modal__close {
    top: 13px;
    right: 13px;
  }
}

.codex-entry {
  width: min(1180px, calc(100% - 40px));
  margin: 18px auto 0;
}

.codex-entry__card {
  display: grid;
  align-items: center;
  gap: 20px;
  padding: 18px 22px;
  border: 1px solid rgba(52, 229, 151, 0.28);
  border-radius: 26px;
  color: #ffffff;
  background:
    radial-gradient(circle at 10% 0%, rgba(52, 229, 151, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(3, 56, 45, 0.98), rgba(3, 42, 34, 0.98));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-decoration: none;
}

.codex-entry__visual {
  display: grid;
  width: 70px;
  height: 70px;
  flex: 0 0 70px;
  place-items: center;
  align-content: center;
  gap: 2px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 21px;
  color: #ffffff;
  background: linear-gradient(145deg, #20d79b, #0c9a70);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 12px 28px rgba(8, 121, 87, 0.28);
}

.codex-entry__brand-mark {
  display: block;
  width: 43px;
  height: 43px;
  background: #ffffff;
  -webkit-mask-image: url("/assets/img/services/chatgpt-symbol-mask-v2.webp?v=20260909-emerald-codex1");
  mask-image: url("/assets/img/services/chatgpt-symbol-mask-v2.webp?v=20260909-emerald-codex1");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* ChatGPT: the purchase guide is intentionally prominent and readable. */
body.chatgpt-onboarding-ready .chatgpt-onboarding-brief {
  gap: 24px;
  margin-bottom: 18px;
  padding: 18px 0;
}

body.chatgpt-onboarding-ready .chatgpt-onboarding-brief__copy {
  gap: 14px;
}

body.chatgpt-onboarding-ready .chatgpt-onboarding-brief__mark {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  font-size: 16px;
}

body.chatgpt-onboarding-ready .chatgpt-onboarding-brief__text {
  gap: 4px;
}

body.chatgpt-onboarding-ready .chatgpt-onboarding-brief__text strong {
  font-size: 16px;
  line-height: 1.25;
}

body.chatgpt-onboarding-ready .chatgpt-onboarding-brief__text small {
  font-size: 13px;
  line-height: 1.45;
}

body.chatgpt-onboarding-ready .chatgpt-onboarding-brief__details {
  min-height: 42px;
  padding-inline: 16px;
  font-size: 13px;
}

body.chatgpt-onboarding-ready .chatgpt-onboarding-modal__eyebrow {
  font-size: 13px;
}

body.chatgpt-onboarding-ready .chatgpt-onboarding-modal__dialog h2 {
  font-size: clamp(26px, 3vw, 34px);
}

body.chatgpt-onboarding-ready .chatgpt-onboarding-modal__lead,
body.chatgpt-onboarding-ready .chatgpt-onboarding-step__copy small,
body.chatgpt-onboarding-ready .chatgpt-onboarding-fit__summary small,
body.chatgpt-onboarding-ready .chatgpt-onboarding-fit__list small,
body.chatgpt-onboarding-ready .chatgpt-onboarding-modal__note small {
  font-size: 14px;
  line-height: 1.5;
}

body.chatgpt-onboarding-ready .chatgpt-onboarding-step__copy strong,
body.chatgpt-onboarding-ready .chatgpt-onboarding-fit__summary strong,
body.chatgpt-onboarding-ready .chatgpt-onboarding-fit__list strong,
body.chatgpt-onboarding-ready .chatgpt-onboarding-modal__note strong {
  font-size: 16px;
}

/* The FAQ gets clear topics and roomy click targets for fast scanning. */
main.service-page[data-service-page="chatgpt"] .service-faq-section {
  padding: clamp(30px, 4vw, 48px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  background: radial-gradient(circle at 9% 0%, rgba(53, 242, 143, 0.1), transparent 35%), rgba(12, 16, 23, 0.55);
}

main.service-page[data-service-page="chatgpt"] .service-faq-section .service-section-title {
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

main.service-page[data-service-page="chatgpt"] .service-faq-list {
  overflow: hidden;
  margin-top: 18px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 18px;
  background: rgba(3, 7, 12, 0.22);
}

main.service-page[data-service-page="chatgpt"] .service-faq-item {
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: transparent !important;
}

main.service-page[data-service-page="chatgpt"] .service-faq-item:last-child {
  border-bottom: 0 !important;
}

main.service-page[data-service-page="chatgpt"] .service-faq-question {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
  gap: 14px;
  min-height: 82px;
  padding: 19px 22px !important;
  text-align: left;
}

main.service-page[data-service-page="chatgpt"] .service-faq-question__topic {
  display: none !important;
}

main.service-page[data-service-page="chatgpt"] .service-faq-question__text {
  display: block !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  color: rgba(255, 255, 255, 0.94);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
  transform: none !important;
}

main.service-page[data-service-page="chatgpt"] .service-faq-question__toggle {
  position: relative;
  display: block !important;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: none !important;
}

main.service-page[data-service-page="chatgpt"] .service-faq-question__toggle::before,
main.service-page[data-service-page="chatgpt"] .service-faq-question__toggle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 1.5px;
  content: "";
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.8);
  transform: translate(-50%, -50%);
  transition: transform 180ms ease;
}

main.service-page[data-service-page="chatgpt"] .service-faq-question__toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

main.service-page[data-service-page="chatgpt"] .service-faq-item.active .service-faq-question__toggle::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

main.service-page[data-service-page="chatgpt"] .service-faq-answer {
  padding: 0 58px 22px 22px !important;
}

main.service-page[data-service-page="chatgpt"] .service-faq-answer p {
  font-size: 14px;
  line-height: 1.58;
}

@media (max-width: 760px) {
  body.chatgpt-onboarding-ready .chatgpt-onboarding-brief {
    gap: 14px;
    padding-block: 17px;
  }

  body.chatgpt-onboarding-ready .chatgpt-onboarding-brief__details {
    min-height: 40px;
    margin-left: 52px;
  }

  main.service-page[data-service-page="chatgpt"] .service-faq-section {
    padding: 24px 18px;
    border-radius: 23px;
  }

  main.service-page[data-service-page="chatgpt"] .service-faq-question {
    grid-template-columns: 1fr 22px;
    gap: 10px;
    min-height: 0;
    padding: 18px 16px !important;
  }

  main.service-page[data-service-page="chatgpt"] .service-faq-question__text {
    font-size: 15px;
  }

  main.service-page[data-service-page="chatgpt"] .service-faq-answer {
    padding: 0 16px 20px !important;
  }
}

.codex-entry__visual i {
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.codex-entry__content {
  display: grid;
  gap: 4px;
}

.codex-entry__eyebrow {
  color: #56e9aa;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.codex-entry__content strong {
  color: #ffffff;
  font-size: clamp(22px, 2.1vw, 31px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.08;
}

.codex-entry__content > span:last-child {
  color: rgba(235, 247, 242, 0.62);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.codex-entry__button {
  min-height: 46px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  color: #07110c;
  background: #ffffff;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.codex-entry__card:hover .codex-entry__button,
.codex-entry__card:focus-visible .codex-entry__button {
  color: #ffffff;
  background: #0d8d68;
  transform: translateY(-1px);
}

/* Keep the Codex cross-sell inside the viewport at every product-page width. */
.codex-entry,
.codex-entry__card,
.codex-entry__content {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.codex-entry__card {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

/* The flat constructor has its own rounded image viewport, so the outer shell
   does not need to clip the selected-plan glow at its left edge. */
html body:has(main.service-page[data-service-page="chatgpt"])
  main.service-page[data-service-page="chatgpt"]
  .service-constructor-shell {
  overflow: visible !important;
}

html body:has(main.service-page[data-service-page="chatgpt"])
  main.service-page[data-service-page="chatgpt"] {
  overflow-x: visible !important;
}

/* The onboarding layout hides the long information block that normally sits
   before FAQ. Collapse the section spacing that belonged to that hidden block,
   so the next useful content follows the constructor on every viewport height. */
body.chatgpt-onboarding-ready
  main.service-page[data-service-page="chatgpt"]
  .service-info-section--chatgpt
  + .service-faq-section {
  margin-top: clamp(22px, 3vw, 36px);
  padding-top: 0;
  border-top: 0 !important;
}

html body:has(main.service-page[data-service-page="chatgpt"])
  main.service-page[data-service-page="chatgpt"]
  .service-filter-chip.is-active,
html body:has(main.service-page[data-service-page="chatgpt"])
  main.service-page[data-service-page="chatgpt"]
  .service-filter-chip[aria-pressed="true"] {
  box-shadow:
    0 12px 30px rgba(24, 200, 120, 0.18),
    0 0 22px rgba(53, 242, 143, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
}

.codex-entry__content strong,
.codex-entry__content > span:last-child {
  overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
  .codex-entry__card {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px 18px;
  }

  .codex-entry__button {
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
}

@media (max-width: 620px) {
  .codex-entry {
    width: calc(100vw - 24px);
    margin-top: 14px;
  }

  .codex-entry__card {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 13px;
    padding: 15px;
    border-radius: 22px;
  }

  .codex-entry__visual {
    width: 54px;
    height: 54px;
    border-radius: 17px;
  }

  .codex-entry__content {
    gap: 3px;
  }

  .codex-entry__content strong {
    font-size: clamp(19px, 6vw, 24px);
    line-height: 1.08;
  }

  .codex-entry__content > span:last-child {
    font-size: 12px;
  }

  .codex-entry__button {
    min-height: 44px;
  }

  body.chatgpt-onboarding-ready
    main.service-page[data-service-page="chatgpt"]
    .service-info-section--chatgpt
    + .service-faq-section {
    margin-top: 22px;
  }
}

/* Pro 20x confirmation: visually shares the quiet dark treatment of the
   post-activation review card, but protects the customer before checkout. */
.pro20-renewal-confirm[hidden] {
  display: none !important;
}

.pro20-renewal-confirm {
  position: fixed;
  z-index: 12000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  box-sizing: border-box;
}

.pro20-renewal-confirm__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(4, 12, 17, 0.78);
  backdrop-filter: blur(11px);
  cursor: default;
}

.pro20-renewal-confirm__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 570px);
  padding: 31px;
  overflow: hidden;
  border: 1px solid rgba(77, 241, 165, 0.28);
  border-radius: 28px;
  color: #f6fffb;
  background:
    radial-gradient(circle at 87% 5%, rgba(31, 222, 139, 0.16), transparent 38%),
    linear-gradient(145deg, rgba(21, 39, 46, 0.98), rgba(9, 23, 28, 0.99));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.46), 0 0 0 1px rgba(255, 255, 255, 0.035) inset;
}

.pro20-renewal-confirm__close {
  position: absolute;
  top: 15px;
  right: 17px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.05);
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}

.pro20-renewal-confirm__eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 29px;
  padding: 0 11px;
  border: 1px solid rgba(70, 238, 158, 0.3);
  border-radius: 999px;
  color: #68f1b0;
  background: rgba(36, 205, 127, 0.1);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pro20-renewal-confirm__mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-top: 19px;
  border: 1px solid rgba(85, 245, 173, 0.45);
  border-radius: 18px;
  color: #8affc5;
  background: linear-gradient(145deg, rgba(42, 221, 137, 0.26), rgba(11, 125, 85, 0.2));
  box-shadow: 0 12px 30px rgba(19, 219, 128, 0.16);
  font-size: 29px;
  font-weight: 900;
}

.pro20-renewal-confirm h2 {
  max-width: 440px;
  margin: 17px 0 8px;
  color: #fff;
  font-size: clamp(25px, 4vw, 34px);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1.06;
}

.pro20-renewal-confirm__lead {
  margin: 0;
  color: rgba(237, 249, 245, 0.78);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.48;
}

.pro20-renewal-confirm__note {
  display: grid;
  gap: 4px;
  margin-top: 20px;
  padding: 15px 17px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.045);
}

.pro20-renewal-confirm__note strong {
  color: #fff;
  font-size: 14px;
  font-weight: 850;
}

.pro20-renewal-confirm__note span {
  color: rgba(233, 245, 241, 0.66);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
}

.pro20-renewal-confirm__check {
  display: grid;
  grid-template-columns: 21px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  margin: 20px 1px;
  color: #f3fffa;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.42;
  cursor: pointer;
}

.pro20-renewal-confirm__check input {
  width: 19px;
  height: 19px;
  margin: 1px 0 0;
  accent-color: #27d78b;
  cursor: pointer;
}

.pro20-renewal-confirm__actions {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 10px;
}

.pro20-renewal-confirm__actions button {
  min-height: 51px;
  padding: 10px 15px;
  border-radius: 15px;
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
  transition: transform 0.18s ease, opacity 0.18s ease, background 0.18s ease;
}

.pro20-renewal-confirm__back {
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(250, 255, 253, 0.9);
  background: rgba(255, 255, 255, 0.055);
}

.pro20-renewal-confirm__continue {
  border: 1px solid rgba(88, 255, 177, 0.48);
  color: #062317;
  background: linear-gradient(135deg, #55f0a7, #16b776);
  box-shadow: 0 10px 27px rgba(21, 211, 126, 0.2);
}

.pro20-renewal-confirm__actions button:hover:not(:disabled),
.pro20-renewal-confirm__close:hover {
  transform: translateY(-1px);
}

.pro20-renewal-confirm__continue:disabled {
  opacity: 0.43;
  cursor: not-allowed;
  box-shadow: none;
}

@media (max-width: 560px) {
  .pro20-renewal-confirm { padding: 14px; }
  .pro20-renewal-confirm__dialog { padding: 25px 20px 20px; border-radius: 24px; }
  .pro20-renewal-confirm h2 { max-width: 300px; font-size: 27px; }
  .pro20-renewal-confirm__lead { font-size: 15px; }
  .pro20-renewal-confirm__actions { grid-template-columns: 1fr; }
  .pro20-renewal-confirm__continue { order: -1; }
}