/* ==========================================================================
   CREATIVE MARTIN STUDIOS — DESIGN CONSISTENCY LAYER
   --------------------------------------------------------------------------
   This file loads AFTER style.css and is the single source of truth for the
   shared component vocabulary. Every rule here is defined exactly once —
   if a component looks inconsistent somewhere, fix the token or rule HERE,
   never by adding another override elsewhere.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS — one palette, one spacing rhythm, one radius scale.
   -------------------------------------------------------------------------- */
:root {
  --cms-ink: #111a15;
  --cms-text: #0f172a;
  --cms-muted: #5b6b81;
  --cms-green: #2cdd9b;
  --cms-green-deep: #18c686;
  --cms-green-soft: rgba(44, 221, 155, .12);
  --cms-accent-solid: #4dbcda;
  --cms-accent-gradient: linear-gradient(90deg, rgba(77, 188, 218, 1) 0%, rgba(44, 220, 157, 1) 100%);
  /* Legacy alias: anything still reading --cms-yellow gets the new accent. */
  --cms-yellow: #4dbcda;
  --cms-surface: #ffffff;
  --cms-surface-soft: #f8fafc;
  --cms-line: #e2e8f0;
  --cms-radius-lg: 18px;
  --cms-radius-md: 12px;
  --cms-radius-sm: 8px;
  --cms-shadow-sm: 0 8px 22px rgba(15, 23, 42, .06);
  --cms-shadow-md: 0 18px 40px rgba(15, 23, 42, .08);
  --cms-page-gutter: 20px;
  --cms-section-pad: clamp(56px, 8vw, 110px);
}

/* --------------------------------------------------------------------------
   2. SECTION TITLES — the kicker/eyebrow + heading pattern, identical on
      every page. Covers the different class names already in the templates.
   -------------------------------------------------------------------------- */
body.page-public :not(#cms) :is(.section-title, .studio-eyebrow, .studio-kicker, .pricing-kicker, .career-eyebrow, .aw-kicker) {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--cms-green-deep);
  display: inline-flex;
  font-size: .76rem;
  font-weight: 900;
  gap: .55rem;
  letter-spacing: .12em;
  line-height: 1;
  margin-bottom: 14px;
  padding: 0;
  text-transform: uppercase;
}

body.page-public :not(#cms) :is(.studio-title, .lg-title, .pricing-title, .careers-list-title, .aw-title, .category-heading) {
  color: var(--cms-ink);
  letter-spacing: -.045em;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   3. CARDS — one card look: white surface, hairline border, soft radius.
   -------------------------------------------------------------------------- */
body.page-public :not(#cms) :is(.job-card, .sitemap-card, .studio-testimonial-card, .careers-empty, .filter-wrap, .project-inquiry-form, .mb-faq-item) {
  background: var(--cms-surface);
  border: 1px solid var(--cms-line);
  border-radius: var(--cms-radius-lg);
}

body.page-public :not(#cms) :is(.careers-open-pitch, .portfolio-detail-cta-inner, .help-contact-box) {
  background: var(--cms-surface-soft);
  border: 1px solid var(--cms-line);
  border-radius: var(--cms-radius-lg);
}

/* --------------------------------------------------------------------------
   4. BUTTONS — primary is ink, hover green; ghost is outlined.
   -------------------------------------------------------------------------- */
body.page-public :not(#cms) :is(.btn-primary, .studio-button-primary, .filter-btn[type="submit"], .btn-mb) {
  background: var(--cms-ink);
  border: 1px solid var(--cms-ink);
  border-radius: 999px;
  box-shadow: none;
  color: #fff;
  font-weight: 700;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

body.page-public :not(#cms) :is(.btn-primary, .studio-button-primary, .filter-btn[type="submit"], .btn-mb):hover {
  background: var(--cms-green);
  border-color: var(--cms-green);
  color: var(--cms-ink);
  transform: translateY(-1px);
}

body.page-public :not(#cms) :is(.btn-outline-primary, .studio-button-ghost) {
  background: transparent;
  border: 1px solid var(--cms-ink);
  border-radius: 999px;
  color: var(--cms-ink);
  font-weight: 700;
  transition: background .2s ease, color .2s ease;
}

body.page-public :not(#cms) :is(.btn-outline-primary, .studio-button-ghost):hover {
  background: var(--cms-ink);
  color: #fff;
}

/* --------------------------------------------------------------------------
   5. ACCORDIONS — help, home FAQ, pricing FAQ, service FAQ share one look.
   -------------------------------------------------------------------------- */
body.page-public :not(#cms) :is(.cms-accordion-item, .studio-process-item, .accordion-item) {
  background: var(--cms-surface);
  border: 1px solid var(--cms-line);
  border-radius: var(--cms-radius-md);
  overflow: hidden;
}

body.page-public :not(#cms) :is(.cms-accordion-trigger, .accordion-button) {
  color: var(--cms-ink);
  font-weight: 650;
}

body.page-public :not(#cms) :is(.cms-accordion-trigger, .accordion-button):focus-visible {
  box-shadow: 0 0 0 4px var(--cms-green-soft);
  outline: 2px solid var(--cms-green-deep);
  outline-offset: -2px;
}

/* --------------------------------------------------------------------------
   6. MOBILE GUTTERS — every page keeps the same breathing room at the
      edges. Wins over the legacy width-calc gutter attempts by loading last.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  body.page-public.route-portfolio .portfolio-detail > .container,
  body.page-public.route-pricing_detail .pricing-detail-section > .container,
  body.page-public.route-services .svc-detail-section > .container,
  body.page-public.route-blog .shopify-article-page > .container {
    padding-left: var(--cms-page-gutter);
    padding-right: var(--cms-page-gutter);
    width: 100%;
  }

  /* Full-bleed sections keep content off the screen edge. */
  body.page-public :not(#cms) :is(.aw-section, .portfolio-detail-cta, .careers-open-pitch) {
    margin-left: 0;
    margin-right: 0;
  }

  body.page-public .studio-shell,
  body.page-public .inner-breadcrumb-shell {
    padding-left: var(--cms-page-gutter);
    padding-right: var(--cms-page-gutter);
  }

  /* Breadcrumb block: everything hard-left on mobile (the kicker carried
     a stray indent). */
  body.page-public :not(#cms) :is(.inner-breadcrumb-kicker) {
    margin-left: 0;
    margin-right: 0;
  }

  body.page-public :not(#cms) :is(.inner-breadcrumb-layout, .inner-breadcrumb-copy, .inner-breadcrumb-trail) {
    justify-content: flex-start;
    justify-items: start;
    text-align: left;
  }

  /* Breadcrumb trail: one line, long current-page titles truncate with an
     ellipsis instead of wrapping under the hero. */
  body.page-public .inner-breadcrumb-trail .breadcrumb {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow: hidden;
  }

  body.page-public :not(#cms) :is(.inner-breadcrumb-trail .breadcrumb-item) {
    white-space: nowrap;
  }

  body.page-public :not(#cms) :is(.inner-breadcrumb-trail .breadcrumb-item.active) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Blog sidebar category lists read as a left-aligned column on mobile,
     never centered. */
  body.page-public :not(#cms) :is(.ark-cat-list, .ark-category-list) {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  body.page-public :not(#cms) :is(.ark-cat-link, .ark-cat-item) {
    justify-content: flex-start;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   7. ARTICLE META + SHARE BAR — blog detail furniture.
   -------------------------------------------------------------------------- */
.cms-article-meta {
  border-bottom: 1px solid var(--cms-line);
  color: var(--cms-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: .86rem;
  gap: 8px 22px;
  margin-bottom: 26px;
  padding-bottom: 16px;
}

.cms-article-meta span {
  align-items: center;
  display: inline-flex;
  gap: .45rem;
}

.cms-article-meta i {
  color: var(--cms-green-deep);
}

.cms-share-bar {
  align-items: center;
  border-top: 1px solid var(--cms-line);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
  padding-top: 22px;
}

.cms-share-label {
  color: var(--cms-ink);
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.cms-share-buttons {
  display: flex;
  gap: 8px;
}

.cms-share-buttons a,
.cms-share-buttons button {
  align-items: center;
  background: var(--cms-surface-soft);
  border: 1px solid var(--cms-line);
  border-radius: 999px;
  color: var(--cms-ink);
  display: inline-flex;
  font-size: 1.05rem;
  height: 42px;
  justify-content: center;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  width: 42px;
}

.cms-share-buttons a:hover,
.cms-share-buttons button:hover {
  background: var(--cms-ink);
  border-color: var(--cms-ink);
  color: #fff;
}

.cms-share-copied {
  color: var(--cms-green-deep);
  font-size: .84rem;
  font-weight: 600;
}

/* Service-detail sidebar: share actions use the same round chips as the
   blog share bar, and related-service rows sit on symmetric padding. */
body.page-public :not(#cms) :is(.svc-share-actions) {
  display: flex;
  gap: 8px;
}

body.page-public :not(#cms) :is(.svc-share-actions a, .svc-share-actions button) {
  align-items: center;
  background: var(--cms-surface-soft);
  border: 1px solid var(--cms-line);
  border-radius: 999px;
  color: var(--cms-ink);
  display: inline-flex;
  font-size: 1.05rem;
  height: 42px;
  justify-content: center;
  padding: 0;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  width: 42px;
}

body.page-public :not(#cms) :is(.svc-share-actions a, .svc-share-actions button):hover {
  background: var(--cms-ink);
  border-color: var(--cms-ink);
  color: #fff;
}

body.page-public :not(#cms) :is(.svc-related-link) {
  padding: 10px 12px;
}

/* --------------------------------------------------------------------------
   8. MEGA MENU PROMO SLOT — the ad card in the Services menu. Four
      templates (minimal / dark / warm / image), managed from the dashboard.
   -------------------------------------------------------------------------- */
/* The promo takes the grid's "discover" slot: full-height left column on
   desktop (services + CTA stack on the right), first block in the stacked
   mobile menu. Without a promo the menu collapses to services + CTA. */
body.page-public .studio-mega-promo {
  grid-area: discover;
}

body.page-public .studio-mega-grid:not(.has-promo) {
  grid-template-areas:
    "services"
    "cta";
  grid-template-columns: 1fr;
}

.studio-mega-promo {
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 220px;
  overflow: hidden;
  padding: 22px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.studio-mega-promo:hover {
  box-shadow: var(--cms-shadow-md);
  transform: translateY(-2px);
}

.studio-mega-promo-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.studio-mega-promo-copy small {
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.studio-mega-promo-copy strong {
  font-size: 1.15rem;
  font-weight: 850;
  letter-spacing: -.03em;
  line-height: 1.15;
}

.studio-mega-promo-body {
  font-size: .85rem;
  line-height: 1.5;
}

.studio-mega-promo-copy em {
  align-items: center;
  display: inline-flex;
  font-size: .84rem;
  font-style: normal;
  font-weight: 700;
  gap: .4rem;
  margin-top: 8px;
}

/* Any non-image template with a photo: photo as background under a dark
   linear overlay, copy overlaid in white. */
.studio-mega-promo.has-bg {
  background-image:
    linear-gradient(180deg, rgba(17, 26, 21, .28) 0%, rgba(17, 26, 21, .55) 45%, rgba(17, 26, 21, .94) 100%),
    var(--promo-image);
  background-position: center;
  background-size: cover;
  border: 0;
  color: #fff;
}

.studio-mega-promo.has-bg small,
.studio-mega-promo.has-bg em {
  color: var(--cms-green);
}

.studio-mega-promo.has-bg .studio-mega-promo-body {
  color: rgba(255, 255, 255, .78);
}

/* Template: minimal — white, hairline border. */
.studio-mega-promo-minimal {
  background: var(--cms-surface);
  border: 1px solid var(--cms-line);
  color: var(--cms-ink);
}

.studio-mega-promo-minimal small,
.studio-mega-promo-minimal em {
  color: var(--cms-green-deep);
}

.studio-mega-promo-minimal .studio-mega-promo-body {
  color: var(--cms-muted);
}

/* Template: dark — ink surface, green accents. */
.studio-mega-promo-dark {
  background: var(--cms-ink);
  color: #fff;
}

.studio-mega-promo-dark small,
.studio-mega-promo-dark em {
  color: var(--cms-green);
}

.studio-mega-promo-dark .studio-mega-promo-body {
  color: rgba(255, 255, 255, .72);
}

/* Template: warm — the gradient highlight card. */
.studio-mega-promo-warm {
  background: var(--cms-accent-solid);
  background: var(--cms-accent-gradient);
  color: var(--cms-ink);
}

.studio-mega-promo-warm small,
.studio-mega-promo-warm em {
  color: var(--cms-ink);
}

.studio-mega-promo-warm .studio-mega-promo-body {
  color: rgba(17, 26, 21, .72);
}

/* Template: image — photo on top, caption below. */
.studio-mega-promo-image {
  background: var(--cms-surface);
  border: 1px solid var(--cms-line);
  color: var(--cms-ink);
  justify-content: flex-start;
  padding: 0;
}

.studio-mega-promo-media {
  aspect-ratio: 16 / 9;
  display: block;
  overflow: hidden;
}

.studio-mega-promo-media img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.studio-mega-promo-image .studio-mega-promo-copy {
  padding: 16px 18px 18px;
}

.studio-mega-promo-image small,
.studio-mega-promo-image em {
  color: var(--cms-green-deep);
}

.studio-mega-promo-image .studio-mega-promo-body {
  color: var(--cms-muted);
}

/* --------------------------------------------------------------------------
   9. ACCENT SURFACES — every surface that used to be yellow now carries the
      brand gradient (cyan -> green). Solid fallback first for old browsers.
   -------------------------------------------------------------------------- */
body.page-public :not(#cms) :is(
  .studio-footer-banner,
  .studio-mega-cta,
  .studio-feature-card-amber,
  .studio-hero-availability,
  .studio-journal-meta span:first-child,
  .studio-management-tile-dark i,
  .portfolio-category,
  .help-contact-box,
  .error-code-card,
  .ark-badge-cyan
) {
  background: var(--cms-accent-solid);
  background: var(--cms-accent-gradient);
  color: var(--cms-ink);
}

/* Pseudo-elements can't live inside :is(); the label underline gets the
   gradient separately. */
body.page-public .studio-mega-label::after {
  background: var(--cms-accent-solid);
  background: var(--cms-accent-gradient);
}

/* The CTA button stays ink so it reads against the gradient card. */
body.page-public :not(#cms) :is(.studio-mega-cta a) {
  background: var(--cms-ink);
  color: #fff;
}

/* --------------------------------------------------------------------------
   10. QR STUDIO — the vCard QR tool: one form, one live code, downloads.
       Kept deliberately as quiet as the Help Center.
   -------------------------------------------------------------------------- */
/* Hero band is plain white — no cream fill, no boxed border, no circles. */
body.page-public.route-qrcode .qrcode-hero-section {
  background: var(--cms-surface);
}

body.page-public.route-qrcode .qrcode-hero-section > .container {
  border: 0;
  border-radius: 0;
}

body.page-public.route-qrcode .qrcode-hero-section::before,
body.page-public.route-qrcode .qrcode-hero-section::after {
  content: none;
}

body.page-public.route-qrcode :not(#cms) :is(.qr-studio-hero) {
  margin-inline: auto;
  max-width: 640px;
  padding-block: clamp(24px, 4vw, 48px) clamp(20px, 3vw, 36px);
  text-align: center;
}

body.page-public.route-qrcode :not(#cms) :is(.qr-studio-hero .section-title) {
  justify-content: center;
  width: 100%;
}

.qr-studio-section {
  padding-block: clamp(20px, 3vw, 40px) clamp(48px, 6vw, 80px);
}

/* Full container width so the form + code align with the other sections. */
.qr-studio {
  display: grid;
  gap: 26px;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .8fr);
  margin-inline: auto;
  max-width: none;
}

@media (max-width: 900px) {
  .qr-studio {
    grid-template-columns: 1fr;
  }
}

.qr-studio-form {
  background: var(--cms-surface);
  border: 1px solid var(--cms-line);
  border-radius: var(--cms-radius-lg);
  padding: clamp(22px, 3vw, 34px);
}

.qr-studio-heading {
  color: var(--cms-ink);
  font-size: 1.1rem;
  font-weight: 750;
  letter-spacing: -.02em;
  margin: 0 0 20px;
}

.qr-studio-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 560px) {
  .qr-studio-grid {
    grid-template-columns: 1fr;
  }
}

.qr-studio-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qr-studio-field-wide {
  grid-column: 1 / -1;
}

.qr-studio-field span {
  color: var(--cms-ink);
  font-size: .82rem;
  font-weight: 650;
}

.qr-studio-field span b {
  color: var(--cms-green-deep);
}

.qr-studio-field span em {
  color: var(--cms-muted);
  font-style: normal;
  font-weight: 400;
}

.qr-studio-field input {
  background: var(--cms-surface-soft);
  border: 1px solid var(--cms-line);
  border-radius: var(--cms-radius-sm);
  font-size: .95rem;
  padding: 11px 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.qr-studio-field input:focus {
  border-color: var(--cms-green-deep);
  box-shadow: 0 0 0 4px var(--cms-green-soft);
  outline: 0;
}

.qr-studio-field input.is-invalid {
  border-color: #c94f4f;
}

.qr-studio-note {
  color: var(--cms-muted);
  font-size: .82rem;
  margin: 18px 0 0;
}

.qr-studio-output {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 100px;
}

.qr-studio-code-card {
  align-items: center;
  background: var(--cms-surface);
  border: 1px solid var(--cms-line);
  border-radius: var(--cms-radius-lg);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 3vw, 32px);
}

.qr-studio-code {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 280px;
  width: 100%;
}

.qr-studio-code svg {
  height: auto;
  max-width: 280px;
  width: 100%;
}

.qr-studio-caption {
  color: var(--cms-muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.qr-studio-status {
  align-items: center;
  color: var(--cms-muted);
  display: flex;
  font-size: .85rem;
  gap: .5rem;
  justify-content: center;
}

.qr-studio-status i {
  color: var(--cms-green-deep);
}

.qr-studio-status.is-error,
.qr-studio-status.is-error i {
  color: #c94f4f;
}

.qr-studio-downloads {
  display: grid;
  gap: 10px;
}

.btn-download {
  align-items: center;
  background: transparent;
  border: 1px solid var(--cms-ink);
  border-radius: 999px;
  color: var(--cms-ink);
  display: inline-flex;
  font-weight: 700;
  gap: .45rem;
  justify-content: center;
  padding: 11px 22px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.btn-download-primary {
  background: var(--cms-ink);
  color: #fff;
}

.btn-download:hover {
  background: var(--cms-green);
  border-color: var(--cms-green);
  color: var(--cms-ink);
}

body.page-public.route-qrcode :not(#cms) :is(.qrcode-benefit-card) {
  background: var(--cms-surface);
  border: 1px solid var(--cms-line);
  border-radius: var(--cms-radius-lg);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   HELP CENTER — centered hero + search, topic cards, shared accordion.
   -------------------------------------------------------------------------- */
body.page-public :not(#cms) :is(.help-hero-centered) {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin-inline: auto;
  max-width: 640px;
  padding-block: clamp(24px, 4vw, 48px) clamp(20px, 3vw, 36px);
  padding-inline: 0;
  text-align: center;
}

body.page-public :not(#cms) :is(.help-hero-centered .section-title) {
  justify-content: center;
  width: 100%;
}

.help-hero-search {
  margin: 22px auto 0;
  max-width: 520px;
  position: relative;
}

.help-hero-search i {
  color: var(--cms-muted);
  left: 18px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

body.page-public :not(#cms) :is(.help-hero-search .search-box) {
  background: var(--cms-surface);
  border: 1px solid var(--cms-line);
  border-radius: 999px;
  font-size: 1rem;
  padding: 14px 22px 14px 46px;
}

body.page-public :not(#cms) :is(.help-hero-search .search-box):focus {
  border-color: var(--cms-green-deep);
  box-shadow: 0 0 0 4px var(--cms-green-soft);
  outline: 0;
}

body.page-public :not(#cms) :is(.help-topic-cards) {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-inline: auto;
  max-width: 760px;
  padding-block: 10px 26px;
}

body.page-public :not(#cms) :is(.help-topic-card) {
  align-items: center;
  background: var(--cms-surface);
  border: 1px solid var(--cms-line);
  border-radius: var(--cms-radius-md);
  color: var(--cms-ink);
  display: flex;
  flex-direction: column;
  font-size: .92rem;
  font-weight: 700;
  gap: 10px;
  justify-content: center;
  min-height: 96px;
  padding: 18px 12px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

body.page-public :not(#cms) :is(.help-topic-card i) {
  color: var(--cms-green-deep);
  font-size: 1.5rem;
}

body.page-public :not(#cms) :is(.help-topic-card):hover {
  border-color: var(--cms-green);
  box-shadow: var(--cms-shadow-sm);
  transform: translateY(-2px);
}

body.page-public :not(#cms) :is(.help-topic-card.active) {
  border-color: var(--cms-green-deep);
  box-shadow: 0 0 0 4px var(--cms-green-soft);
}

/* --------------------------------------------------------------------------
   SITEMAP — quiet column index: group headings + plain links, no cards.
   -------------------------------------------------------------------------- */
.cms-sitemap-section {
  padding-block: clamp(32px, 5vw, 64px) clamp(56px, 8vw, 96px);
}

.cms-sitemap-grid {
  display: grid;
  gap: clamp(32px, 5vw, 56px) clamp(28px, 4vw, 48px);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.cms-sitemap-group h2 {
  color: var(--cms-ink);
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: -.01em;
  margin: 0 0 16px;
}

.cms-sitemap-group ul {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cms-sitemap-group a {
  color: var(--cms-muted);
  font-size: .95rem;
  line-height: 1.45;
  text-decoration: none;
  transition: color .18s ease;
}

.cms-sitemap-group a:hover {
  color: var(--cms-green-deep);
}

/* --------------------------------------------------------------------------
   11. SERVICE / FEATURE ICONS — one icon treatment: brand-green disc,
       white glyph.
   -------------------------------------------------------------------------- */
body.page-public :not(#cms) :is(.studio-feature-icon, .svc-clean-icon, .svc-related-ico) {
  background: var(--cms-green);
  border: 0;
  border-radius: 999px;
  color: #fff;
}

body.page-public :not(#cms) :is(.studio-feature-icon i, .svc-clean-icon i, .svc-related-ico i) {
  color: #fff;
}

/* Chat agent photo: real person, round crop. */
.support-agent-photo {
  border-radius: 999px;
  height: 44px;
  object-fit: cover;
  width: 44px;
}

/* --------------------------------------------------------------------------
   12. COOKIE TOGGLES — consent checkboxes render as on/off switches.
   -------------------------------------------------------------------------- */
.studio-cookie-option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  background: #cbd5e1;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  flex: 0 0 auto;
  height: 26px;
  margin: 0;
  position: relative;
  transition: background .2s ease;
  width: 48px;
}

.studio-cookie-option input[type="checkbox"]::after {
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .25);
  content: "";
  height: 20px;
  left: 3px;
  position: absolute;
  top: 3px;
  transition: transform .2s ease;
  width: 20px;
}

.studio-cookie-option input[type="checkbox"]:checked {
  background: var(--cms-green);
}

.studio-cookie-option input[type="checkbox"]:checked::after {
  transform: translateX(22px);
}

.studio-cookie-option input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.studio-cookie-option input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--cms-green-deep);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   11. FOCUS VISIBILITY — one focus style everywhere.
   -------------------------------------------------------------------------- */
body.page-public :not(#cms) :is(a, button, input, select, textarea, summary):focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--cms-green-deep);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   12. PRICING FILTER TABS — match the portfolio filter buttons exactly:
       plain container, outlined pill, ink active state.
   -------------------------------------------------------------------------- */
body.page-public.route-pricing :not(#cms) :is(.pricing-tabs) {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
  padding: 0;
}

body.page-public.route-pricing :not(#cms) :is(.pricing-tabs .tab-btn) {
  align-items: center;
  background: none;
  border: 2px solid var(--cms-line);
  border-radius: var(--cms-radius-sm);
  box-shadow: none;
  color: var(--cms-ink);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1rem;
  font-weight: 900;
  justify-content: center;
  line-height: 1;
  min-height: 44px;
  min-width: 92px;
  padding: 0 18px;
  text-align: center;
  width: auto;
}

body.page-public.route-pricing :not(#cms) :is(.pricing-tabs .tab-btn.is-active),
body.page-public.route-pricing :not(#cms) :is(.pricing-tabs .tab-btn:hover) {
  background: var(--cms-ink);
  border-color: var(--cms-ink);
  color: #fff;
}

/* --------------------------------------------------------------------------
   13. FOOTER SOCIAL ICONS — no border, larger glyph.
   -------------------------------------------------------------------------- */
body.page-public :not(#cms) :is(.studio-footer-socials a) {
  border: 0;
  font-size: 1rem;
}

body.page-public :not(#cms) :is(.studio-footer-socials a i) {
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   14. QR BENEFITS / FEATURES — no wrapping card, plain feature cards whose
       body text matches the site body copy.
   -------------------------------------------------------------------------- */
body.page-public.route-qrcode :not(#cms) :is(.qrcode-benefits-section > .container) {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding-inline: 0;
}

/* Centered content, height driven by content (no forced 390px square). */
body.page-public.route-qrcode :not(#cms) :is(.qrcode-benefit-card) {
  align-items: center;
  justify-content: flex-start;
  min-height: 0;
  text-align: center;
}

body.page-public.route-qrcode :not(#cms) :is(.qrcode-benefit-card p) {
  color: var(--cms-muted);
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 0;
}