/*
 * Finishing layer for the legacy content inside premium internal pages.
 * Load after premium-interior.css. No demo/app surfaces, project palettes,
 * screenshots, or before/after examples are restyled here.
 */

/* The shared project cards now have light surfaces, not the old dark glass. */
body.premium-internal .premium-content :is(.ks-proof-showcase, .ks-proof-card) {
  color: #17191f;
}

body.premium-internal .premium-content .ks-proof-card:hover {
  border-color: #7c8593;
  background: #ffffff;
}

body.premium-internal .premium-content .ks-proof-copy > span {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  margin-bottom: 8px;
  border-radius: 4px;
  background: #c4f455;
  color: #17191f;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.4;
  letter-spacing: .1em;
}

body.premium-internal .premium-content :is(.ks-proof-demo, .ks-proof-note a) {
  color: #17191f;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

body.premium-internal .premium-content .ks-proof-demo {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-top-color: #dfe3e9;
  font-size: 14px;
}

body.premium-internal .premium-content :is(.ks-proof-demo, .ks-proof-note a):hover {
  color: #17191f;
  text-decoration-thickness: 2px;
}

body.premium-internal .premium-content :is(.ks-proof-card, .ks-proof-card-main, .ks-proof-demo, .ks-proof-note a):focus-visible {
  outline: 2px solid #17191f;
  outline-offset: -3px;
}

/* A solid caption surface protects text over any crop of a preview photo. */
body.premium-internal .premium-content .ks-hero-preview-caption {
  background: #17191f;
  color: #fff;
}

body.premium-internal .premium-content .ks-hero-preview-caption :is(strong, b) {
  color: #fff;
}

body.premium-internal .premium-content .ks-hero-preview-caption small {
  color: #c4f455;
}

/* The software illustration is light; keep its caption in the light theme. */
body.premium-internal .premium-content .ks-hero-preview--software .ks-hero-preview-caption {
  background: #ffffff;
  color: #17191f;
}

body.premium-internal .premium-content .ks-hero-preview--software .ks-hero-preview-caption :is(small, strong, b) {
  color: #17191f;
}

/* The pricing notice uses spans, not the separate .ks-pay-path grid. */
/* Secondary labels keep enough contrast on the soft green contact surfaces. */
body.premium-internal .premium-content .payment-selected-pill > span {
  color: #17191f;
}

body.premium-internal .premium-content :is(.contact-aside, .contact-steps) :is(small, a > span) {
  color: #4d5664;
}

body.premium-internal .premium-content figure > figcaption {
  color: #59616d;
}

body.premium-internal .premium-content .ks-price-notice .ks-pay-path {
  display: block;
  margin: 14px 0 0;
  padding: 18px;
  border: 1px solid #dfe3e9;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: none;
  color: #4d5664;
  font-size: 14px;
  line-height: 1.65;
}

body.premium-internal .premium-content .ks-price-notice .ks-pay-path b {
  margin-bottom: 5px;
  color: #17191f;
}

body.premium-internal .premium-content .rate-pill .txt > span {
  color: #59616d;
}

body.premium-internal .premium-content .rate-pill .ico {
  box-shadow: none;
  color: #17191f;
}

body.premium-internal .premium-content .rate-pill .cta {
  border: 1px solid #a7bd78;
  border-radius: 6px;
  background: #c4f455;
  box-shadow: none;
  color: #17191f;
}

body.premium-internal .premium-content .rate-pill:hover .cta {
  background: #b9e54f;
  border-color: #17191f;
  box-shadow: none;
}

body.premium-internal .premium-content .rate-pill:focus-visible {
  outline: 2px solid #17191f;
  outline-offset: 4px;
  box-shadow: none;
}

body.premium-internal .premium-content .ks-price-terms {
  margin: 0;
  padding: 48px 0;
  border: 0 !important;
  border-top: 1px solid #dfe3e9 !important;
  border-radius: 0;
  background: none !important;
  box-shadow: none;
  backdrop-filter: none;
}

/* Only the external caption; the illustrated before/after is preserved. */
body.premium-internal .premium-content .ks-restyling-preview-copy {
  background: #f1f3f6;
}

/* Remove the old glass tray behind the already-neutral service cards. */
body.premium-internal .premium-content .ks-local-services {
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: none !important;
  box-shadow: none;
  backdrop-filter: none;
}

/* Legacy glass sections declare a full white border with !important. */
body.premium-internal .premium-content .ks-section {
  border: 0 !important;
  border-top: 1px solid #dfe3e9 !important;
}

body.premium-internal .premium-content .ks-geo-story-grid > article {
  border: 1px solid #dfe3e9;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: none;
}

body.premium-internal .premium-content .ks-geo-story-grid > article > span,
body.premium-internal .premium-content .ks-local-method li > span {
  color: #59616d;
}

body.premium-internal .premium-content .ks-local-method li,
body.premium-internal .premium-content .ks-service-faq article,
body.premium-internal .premium-content .ks-trust-commitments {
  border-color: #dfe3e9;
}

body.premium-internal .premium-content .ks-service-brief,
body.premium-internal .premium-content .ks-service-brief :is(ul, .ks-actions) {
  color: #4d5664;
}

body.premium-internal .premium-content .ks-service-crumbs > span::before {
  border-color: #59616d;
}

body.premium-internal .premium-content .ks-coverage-links > div a {
  border-color: #dfe3e9;
  border-radius: 6px;
  background: none;
  box-shadow: none;
  color: #17191f;
}

body.premium-internal .premium-content .ks-coverage-links > div a:hover {
  border-color: #7c8593;
  background: #f1f3f6;
}

body.premium-internal .premium-content .ks-method > ol > li,
body.premium-internal .premium-content .ks-trust-commitments article {
  border: 1px solid #dfe3e9;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: none;
}

/* These editorial explainers have content, but no retained legacy layout. */
body.premium-internal .premium-content :is(.ks-seo-explainer, .ks-social-method) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 32px;
  margin: 28px 0 40px;
  padding: 32px;
}

body.premium-internal .premium-content :is(.ks-seo-explainer, .ks-social-method) > * {
  min-width: 0;
}

body.premium-internal .premium-content .ks-seo-explainer figure {
  margin: 0;
}

body.premium-internal .premium-content .ks-seo-explainer figure img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

body.premium-internal .premium-content .ks-seo-explainer figcaption {
  margin-top: 14px;
  color: #59616d;
  font-size: 13px;
  line-height: 1.6;
}

body.premium-internal .premium-content .ks-seo-explainer-copy ol {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

body.premium-internal .premium-content .ks-seo-explainer-copy li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  padding: 16px 0;
  border-top: 1px solid #dfe3e9;
}

body.premium-internal .premium-content .ks-seo-explainer-copy li > span,
body.premium-internal .premium-content .ks-social-method-flow article > span {
  color: #59616d;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.8;
}

body.premium-internal .premium-content .ks-seo-explainer-copy li p {
  margin: 6px 0 0;
  font-size: 15px;
}

body.premium-internal .premium-content .ks-social-method-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

body.premium-internal .premium-content .ks-social-method-flow article {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  padding: 20px;
  border: 1px solid #dfe3e9;
  border-radius: 8px;
}

body.premium-internal .premium-content .ks-social-method-flow article h3 {
  margin-bottom: 10px;
  font-size: 20px;
}

body.premium-internal .premium-content .ks-social-method-flow article p {
  margin: 0;
  font-size: 15px;
}

body.premium-internal .premium-content .ks-social-method-result {
  grid-column: 1 / -1;
  padding: 20px;
}

@media (max-width: 980px) {
  body.premium-internal .premium-content :is(.ks-seo-explainer, .ks-social-method) {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 24px;
  }
}

@media (max-width: 620px) {
  body.premium-internal .premium-content .ks-price-terms {
    padding: 34px 0;
  }

  body.premium-internal .premium-content .ks-price-notice .ks-pay-path {
    padding: 15px;
  }

  body.premium-internal .premium-content :is(.ks-seo-explainer, .ks-social-method) {
    padding: 20px;
  }

  body.premium-internal .premium-content .ks-social-method-flow article {
    padding: 16px;
  }
}