/* =========================================================
   SMARTME Signature — detail pages
   Service · Industry · Case study · Article (6 layouts)
   Uses the --sx- tokens defined in signature.css.
   ========================================================= */

.sx-narrow { max-width: 760px; }

/* Reading progress */
.sx-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 1001; pointer-events: none; }
.sx-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--sx-orange), var(--sx-orange-2)); transition: width .1s linear; }
body.admin-bar .sx-progress { top: 32px; }

/* Breadcrumb */
.sx-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0 0 22px; padding: 0; font-size: 13px; color: var(--sx-fg-3); }
.sx-crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.sx-crumbs li + li::before { content: "/"; opacity: .5; }
.sx-crumbs a { color: var(--sx-fg-2); transition: color .2s; }
.sx-crumbs a:hover { color: var(--sx-orange); }
.sx-crumbs [aria-current] { color: var(--sx-fg); max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Chips */
.sx-chip-tag { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; background: rgba(255, 90, 31, .12); color: var(--sx-orange); font-size: 13px; font-weight: 500; }
.sx-chip-tag svg { width: 15px; height: 15px; }
.sx-chip-tag--soft { background: var(--sx-tint); color: var(--sx-fg); }
.sx-chip-tag--glass { background: rgba(255, 255, 255, .14); color: #fff; backdrop-filter: blur(8px); }

/* Photo heroes need a light nav until scrolled */
.sx-hero-dark .sx-nav:not(.is-scrolled) { color: #fff; }
.sx-hero-dark .sx-nav:not(.is-scrolled) .sx-menu--desktop > li > .sx-nav-link { color: rgba(255, 255, 255, .78); }
.sx-hero-dark .sx-nav:not(.is-scrolled) .sx-menu--desktop > li:hover > .sx-nav-link { color: #fff; background: rgba(255, 255, 255, .1); }
.sx-hero-dark .sx-nav:not(.is-scrolled) .sx-logo-color { display: none; }
.sx-hero-dark .sx-nav:not(.is-scrolled) .sx-logo-white { display: block; }
.sx-hero-dark .sx-nav:not(.is-scrolled) .sx-icon-btn,
.sx-hero-dark .sx-nav:not(.is-scrolled) .sx-lang { border-color: rgba(255, 255, 255, .25) !important; color: #fff; }
.sx-hero-dark .sx-nav:not(.is-scrolled) .sx-lang a { color: rgba(255, 255, 255, .6); }
.sx-hero-dark .sx-nav:not(.is-scrolled) .sx-lang a.is-active { color: #fff; background: rgba(255, 255, 255, .14); }

/* =========================================================
   DETAIL HERO (service / industry / case study)
   ========================================================= */
.sx-dhero { position: relative; overflow: hidden; background: var(--sx-bg); padding: 150px 0 96px; }
.sx-dhero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(55% 60% at 90% 10%, var(--sx-glow-a), transparent 70%), radial-gradient(50% 60% at 0% 100%, var(--sx-glow-b), transparent 70%); }
.sx-dhero > .sx-wrap { position: relative; z-index: 1; }
.sx-dhero .sx-hero-art { -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 75%); mask-image: linear-gradient(90deg, transparent 30%, #000 75%); }
.sx-dhero h1 { margin-top: 18px; font-size: clamp(40px, 5.6vw, 76px); line-height: 1.02; letter-spacing: -.04em; font-weight: 500; color: var(--sx-fg); }
.sx-dhero-lede { margin-top: 22px; font-size: 19px; line-height: 1.6; color: var(--sx-fg-2); max-width: 620px; }
.sx-dhero .sx-actions { margin-top: 32px; }

.sx-dhero-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.sx-dhero-points { margin-top: 36px !important; display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 14.5px; color: var(--sx-fg-2); }
.sx-dhero-points li { display: inline-flex; align-items: center; gap: 8px; }
.sx-dhero-points svg { width: 18px; height: 18px; color: var(--sx-signal); }
.sx-svc-stage {
  position: relative; aspect-ratio: 1 / .92; border-radius: 32px; display: grid; place-items: center; overflow: hidden; padding: 48px;
  background: radial-gradient(60% 60% at 50% 55%, rgba(255, 90, 31, .28), transparent 70%), radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(160deg, var(--sx-ink-3), var(--sx-ink));
  box-shadow: var(--sx-shadow);
}
.sx-svc-stage img { max-height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); }
.sx-svc-icon { width: 160px; height: 160px; border-radius: 40px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--sx-orange), var(--sx-orange-2)); box-shadow: 0 30px 80px -20px rgba(255, 90, 31, .7); }
.sx-svc-icon svg { width: 72px; height: 72px; }

/* Industry photo hero */
.sx-dhero--photo { min-height: 760px; display: flex; align-items: flex-end; padding: 170px 0 56px; color: #fff; background: var(--sx-ink); }
.sx-dhero--photo::before { z-index: 1; background: linear-gradient(180deg, rgba(6, 9, 21, .55) 0%, rgba(6, 9, 21, .35) 35%, rgba(6, 9, 21, .92) 100%), linear-gradient(90deg, rgba(6, 9, 21, .7), transparent 70%); }
.sx-dhero-bg { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.sx-dhero--photo .sx-wrap { width: 100%; }
.sx-dhero--photo h1, .sx-dhero--photo .sx-dhero-lede { color: #fff; }
.sx-dhero--photo .sx-dhero-lede { color: rgba(255, 255, 255, .8); }
.sx-dhero--photo .sx-eyebrow, .sx-dhero--photo .sx-crumbs ol, .sx-dhero--photo .sx-crumbs a { color: rgba(255, 255, 255, .7); }
.sx-dhero--photo .sx-crumbs [aria-current] { color: #fff; }
.sx-dhero--photo .sx-dhero-copy { max-width: 860px; }
.sx-dhero-stats { margin-top: 56px; display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 20px; overflow: hidden; background: rgba(12, 16, 40, .5); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.sx-dhero-stats div { padding: 22px 26px; }
.sx-dhero-stats strong { display: block; font-size: 32px; font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }
.sx-dhero-stats span { font-size: 13.5px; color: rgba(255, 255, 255, .7); }

/* Case study hero */
.sx-dhero--case { padding-bottom: 0; }
.sx-case-hero-top { max-width: 900px; }
.sx-case-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-case-cover { position: relative; margin-top: 56px; border-radius: 32px 32px 0 0; overflow: hidden; height: 560px; background: var(--sx-ink); }
.sx-case-cover img { width: 100%; height: 100% !important; object-fit: cover; }
.sx-case-cover-bar {
  position: absolute; left: 24px; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 36px; padding: 16px 16px 16px 28px; border-radius: 20px;
  background: rgba(12, 16, 40, .6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: #fff; font-size: 15px;
}
.sx-case-cover-bar b { display: block; font-family: var(--sx-mono-f); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); margin-bottom: 2px; }
.sx-case-cover-bar .sx-btn { margin-left: auto; }

/* =========================================================
   GUTENBERG CONTENT COMPONENTS (.sme-* and .ps-* from the parent data)
   ========================================================= */
.sx-content { background: var(--sx-bg); }
.sx-content .container { max-width: var(--sx-wrap); margin: 0 auto; padding: 0 var(--sx-gutter); box-sizing: content-box; }
.sx-content .sme-section, .sx-content .section { padding: 110px 0; background: var(--sx-bg); }
.sx-content .sme-section-alt, .sx-content .section-alt { background: var(--sx-bg-alt); }
.sx-content > p:empty, .sx-content > p:only-child:empty { display: none; }

.sx-content .sme-head, .sx-content .section-head { max-width: 760px; margin-bottom: 52px; }
.sx-content .section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sx-content .sme-eyebrow, .sx-content .section-head .eyebrow {
  display: inline-flex; align-items: center; gap: 10px; font-family: var(--sx-mono-f); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--sx-fg-3);
}
.sx-content .sme-eyebrow::before, .sx-content .section-head .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sx-orange); }
.sx-content .sme-title, .sx-content .section-title { margin-top: 20px; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -.03em; font-weight: 500; color: var(--sx-fg); }
.sx-content .gradient-text { font-family: var(--sx-serif-f); font-style: italic; font-weight: 800; color: var(--sx-em); letter-spacing: -.035em; padding-right: .06em; }
.sx-content .sme-sub, .sx-content .section-sub { margin-top: 16px; font-size: 17px; line-height: 1.65; color: var(--sx-fg-2); }

/* Problem / solution */
.sx-content .sme-ps, .sx-content .ps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sx-content .sme-ps-card, .sx-content .ps-card { padding: 40px; border-radius: var(--sx-r-lg); background: var(--sx-raise); border: 1px solid var(--sx-line-soft); }
.sx-content .sme-ps-solution, .sx-content .ps-solution {
  color: #fff; border-color: transparent;
  background: radial-gradient(80% 90% at 100% 0%, rgba(255, 90, 31, .4), transparent 60%), radial-gradient(70% 80% at 0% 100%, rgba(26, 55, 200, .55), transparent 60%), var(--sx-ink-2);
}
.sx-content .sme-ps-label, .sx-content .ps-label { display: inline-flex; height: 30px; align-items: center; padding: 0 13px; border-radius: 999px; font-family: var(--sx-mono-f); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; background: var(--sx-tint); color: var(--sx-fg-2); }
.sx-content .sme-ps-solution .sme-ps-label, .sx-content .ps-solution .ps-label { background: rgba(255, 255, 255, .14); color: #fff; }
.sx-content .sme-ps-card h3, .sx-content .ps-card h3 { margin-top: 22px; font-size: 26px; line-height: 1.2; letter-spacing: -.02em; font-weight: 500; }
.sx-content .sme-ps-card p, .sx-content .ps-card p { margin-top: 14px; font-size: 16px; line-height: 1.7; color: var(--sx-fg-2); }
.sx-content .sme-ps-solution p, .sx-content .ps-solution p { color: rgba(255, 255, 255, .78); }
.sx-content .sme-list, .sx-content .sme-usecase ul { margin-top: 18px; display: grid; gap: 12px; list-style: none; padding: 0; }
.sx-content .sme-list li, .sx-content .sme-usecase li { position: relative; padding-left: 30px; font-size: 15.5px; line-height: 1.6; color: var(--sx-fg-2); }
.sx-content .sme-list li::before, .sx-content .sme-usecase li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 90, 31, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3L9.5 3.8' fill='none' stroke='%23ff5a1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.sx-content .sme-list strong { color: var(--sx-fg); font-weight: 600; display: block; }

/* Features */
.sx-content .sme-features, .sx-content .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sx-content .sme-feature, .sx-content .feature-card { height: 100%; padding: 32px 30px; border-radius: var(--sx-r); background: var(--sx-raise); border: 1px solid var(--sx-line-soft); transition: transform .4s var(--sx-ease), box-shadow .4s; display: flex; flex-direction: column; }
.sx-content .sme-feature-link { display: block; color: inherit; }
.sx-content .sme-feature-link:hover .sme-feature, .sx-content .feature-card:hover, .sx-content .sme-feature:hover { transform: translateY(-4px); box-shadow: var(--sx-shadow); }
.sx-content .sx-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 90, 31, .12); color: var(--sx-orange); font-size: 24px; line-height: 1; }
.sx-content .sx-ico svg { width: 24px; height: 24px; }
.sx-content .sme-feature h3, .sx-content .feature-card h3 { margin-top: 26px; font-size: 20px; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; }
.sx-content .sme-feature p, .sx-content .feature-card p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--sx-fg-2); }
.sx-content .sme-feature-arrow { margin-top: auto; padding-top: 18px; display: inline-flex; color: var(--sx-orange); }
.sx-content .sme-feature-arrow svg { width: 20px; height: 20px; transition: transform .3s var(--sx-ease); }
.sx-content .sme-feature-link:hover .sme-feature-arrow svg { transform: translateX(4px); }

/* Steps */
.sx-content .sme-steps, .sx-content .steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: sx-step; }
.sx-content .sme-step, .sx-content .step-card { padding: 30px 28px; border-radius: var(--sx-r); background: var(--sx-raise); border: 1px solid var(--sx-line-soft); }
.sx-content .sme-step-num, .sx-content .step-number { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--sx-inv-bg); color: var(--sx-inv-fg); font-family: var(--sx-mono-f); font-size: 14px; }
.sx-content .sme-step:first-child .sme-step-num, .sx-content .step-card:first-child .step-number { background: var(--sx-orange); color: #fff; }
.sx-content .sme-step h3, .sx-content .step-card h3 { margin-top: 28px; font-size: 21px; font-weight: 500; letter-spacing: -.02em; }
.sx-content .sme-step p, .sx-content .step-card p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--sx-fg-2); }

/* Benefits */
.sx-content .sme-benefits, .sx-content .benefits-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.sx-content .sme-chip, .sx-content .benefit {
  display: flex; align-items: center; gap: 14px; padding: 22px 24px; border-radius: 16px; background: var(--sx-raise); border: 1px solid var(--sx-line-soft); font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--sx-fg);
}
.sx-content .sme-chip::before, .sx-content .benefit::before {
  content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: rgba(43, 212, 140, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3L9.5 3.8' fill='none' stroke='%232bd48c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* Integrations */
.sx-content .sme-integrations { display: flex; flex-wrap: wrap; gap: 12px; }
.sx-content .sme-integration { display: inline-flex; align-items: center; height: 56px; padding: 0 26px; border-radius: 16px; background: var(--sx-raise); border: 1px solid var(--sx-line-soft); font-family: var(--sx-mono-f); font-size: 14px; color: var(--sx-fg); transition: .3s; }
.sx-content .sme-integration:hover { background: var(--sx-inv-bg); color: var(--sx-inv-fg); }

/* Use case */
.sx-content .sme-usecase {
  padding: 48px; border-radius: var(--sx-r-lg); color: #fff;
  background: radial-gradient(70% 90% at 100% 0%, rgba(255, 90, 31, .35), transparent 60%), radial-gradient(60% 80% at 0% 100%, rgba(26, 55, 200, .5), transparent 60%), var(--sx-ink-2);
}
.sx-content .sme-usecase p { font-size: 19px; line-height: 1.6; color: rgba(255, 255, 255, .88); max-width: 860px; }
.sx-content .sme-usecase strong { color: #fff; }
.sx-content .sme-usecase ul { grid-template-columns: repeat(2, 1fr); gap: 14px 32px; margin-top: 28px; }
.sx-content .sme-usecase li { color: rgba(255, 255, 255, .85); }

/* =========================================================
   CARDS
   ========================================================= */
.sx-card-grid { display: grid; gap: 20px; }
.sx-card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sx-card-grid--4 { grid-template-columns: repeat(4, 1fr); }

.sx-photo-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 320px; padding: 24px; border-radius: var(--sx-r); color: #fff; background: var(--sx-ink); }
.sx-photo-card img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; z-index: -2; transition: transform 1.2s var(--sx-ease); }
.sx-photo-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 9, 21, 0) 30%, rgba(6, 9, 21, .9) 100%); }
.sx-photo-card:hover img { transform: scale(1.06); }
.sx-photo-card:hover .sx-ind-go { background: var(--sx-orange); border-color: var(--sx-orange); transform: rotate(-45deg); }
.sx-photo-card h3 { font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.sx-photo-card p { margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .75); }

.sx-svc-card { display: flex; flex-direction: column; padding: 30px; border-radius: var(--sx-r); background: var(--sx-raise); border: 1px solid var(--sx-line-soft); transition: transform .4s var(--sx-ease), box-shadow .4s; }
.sx-svc-card:hover { transform: translateY(-4px); box-shadow: var(--sx-shadow); }
.sx-svc-card-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--sx-inv-bg); color: var(--sx-inv-fg); transition: .3s; }
.sx-svc-card:hover .sx-svc-card-ic { background: var(--sx-orange); color: #fff; }
.sx-svc-card-ic svg { width: 24px; height: 24px; }
.sx-svc-card h3 { margin-top: 26px; font-size: 20px; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; }
.sx-svc-card p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--sx-fg-2); flex: 1; }
.sx-svc-card .sx-more { margin-top: 20px; color: var(--sx-orange); }
.sx-svc-card .sx-more svg { width: 20px; height: 20px; }
.sx-svc-card:hover .sx-more svg { transform: translateX(4px); }

.sx-story-card { display: flex; flex-direction: column; border-radius: var(--sx-r); overflow: hidden; background: var(--sx-raise); border: 1px solid var(--sx-line-soft); transition: transform .4s var(--sx-ease), box-shadow .4s; }
.sx-story-card:hover { transform: translateY(-4px); box-shadow: var(--sx-shadow); }
.sx-story-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(160deg, var(--sx-ink-3), var(--sx-ink)); }
.sx-story-media img { width: 100%; height: 100% !important; object-fit: cover; transition: transform .8s var(--sx-ease); }
.sx-story-card:hover .sx-story-media img { transform: scale(1.04); }
.sx-story-body { display: flex; flex-direction: column; flex: 1; padding: 26px 28px 28px; }
.sx-story-body h3 { margin-top: 10px; font-size: 21px; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; }
.sx-story-body p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--sx-fg-2); flex: 1; }
.sx-story-body .sx-more { margin-top: 18px; }

/* FAQ */
.sx-faq-grid { display: grid; grid-template-columns: 380px 1fr; gap: 72px; align-items: start; }
.sx-faq-head { position: sticky; top: 130px; }
.sx-faq-head .sx-btn { margin-top: 28px; }
.sx-faq { display: grid; gap: 12px; }
.sx-faq-item { border-radius: 18px; background: var(--sx-raise); border: 1px solid var(--sx-line-soft); transition: background .3s; }
.sx-faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; font-size: 17px; font-weight: 500; letter-spacing: -.01em; color: var(--sx-fg); }
.sx-faq-item summary::-webkit-details-marker { display: none; }
.sx-faq-item summary i { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--sx-tint); }
.sx-faq-item summary i::before, .sx-faq-item summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; background: currentColor; transform: translate(-50%, -50%); transition: transform .3s; }
.sx-faq-item summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.sx-faq-item[open] summary i { background: var(--sx-orange); color: #fff; }
.sx-faq-item[open] summary i::after { transform: translate(-50%, -50%) rotate(0); }
.sx-faq-a { padding: 0 26px 24px; font-size: 15.5px; line-height: 1.7; color: var(--sx-fg-2); }

/* Closing CTA */
.sx-detail-cta-wrap { padding-top: 0; }
.sx-detail-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 48px; padding: 64px; border-radius: 32px; color: #fff;
  background: radial-gradient(60% 100% at 100% 0%, rgba(255, 90, 31, .55), transparent 60%), radial-gradient(60% 90% at 0% 100%, rgba(26, 55, 200, .7), transparent 60%), var(--sx-ink);
}
.sx-detail-cta .sx-eyebrow { color: rgba(255, 255, 255, .7); }
.sx-detail-cta h2 { margin-top: 18px; font-size: clamp(32px, 3.8vw, 52px); line-height: 1.05; letter-spacing: -.035em; font-weight: 500; max-width: 760px; }
.sx-detail-cta h2 .sx-serif { color: var(--sx-orange-2); }
.sx-detail-cta p { margin-top: 14px; font-size: 17px; color: rgba(255, 255, 255, .78); max-width: 620px; }
.sx-detail-cta .sx-actions { flex: none; }
.sx-s-alt + .sx-detail-cta-wrap, .sx-content + .sx-detail-cta-wrap { padding-top: 110px; }

/* =========================================================
   ARTICLES — shared
   ========================================================= */
.sx-ahero { position: relative; background: var(--sx-bg); }
.sx-ahero h1 { font-size: clamp(36px, 4.8vw, 64px); line-height: 1.06; letter-spacing: -.035em; font-weight: 500; color: var(--sx-fg); }
.sx-ameta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 22px; font-size: 14px; color: var(--sx-fg-2); }
.sx-ameta span { display: inline-flex; align-items: center; gap: 8px; }
.sx-ameta svg { width: 16px; height: 16px; color: var(--sx-fg-3); }
.sx-ameta--light { color: rgba(255, 255, 255, .8); }
.sx-ameta--light svg { color: rgba(255, 255, 255, .6); }
.sx-ameta--center { justify-content: center; }
.sx-acover { margin-bottom: 0; }
.sx-spot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sx-spot-list a { display: grid; grid-template-columns: 28px 1fr; gap: 6px; padding: 8px 0; font-size: 14.5px; line-height: 1.45; color: var(--sx-fg-2); transition: color .2s; }
.sx-spot-list a span { font-family: var(--sx-mono-f); font-size: 12px; color: var(--sx-fg-3); padding-top: 1px; }
.sx-spot-list a:hover, .sx-spot-list a.is-active { color: var(--sx-fg); }
.sx-spot-list a.is-active span { color: var(--sx-orange); }
.sx-acover img, .sx-acover .articles-generated-cover { display: block; width: 100%; height: 100% !important; object-fit: cover; }
.sx-abody { background: var(--sx-bg); padding: 72px 0 120px; }
.sx-abody-grid { display: grid; gap: 56px; align-items: start; }
.sx-abody--rail .sx-abody-grid { grid-template-columns: 64px minmax(0, 720px); justify-content: center; }
.sx-arail { position: sticky; top: 120px; }

/* Share */
.sx-share { display: flex; align-items: center; gap: 8px; }
.sx-share a, .sx-share button {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--sx-line) !important; color: var(--sx-fg); background: transparent; cursor: pointer; transition: .25s;
}
.sx-share a:hover, .sx-share button:hover { background: var(--sx-inv-bg); color: var(--sx-inv-fg); border-color: var(--sx-inv-bg) !important; }
.sx-share svg { width: 16px; height: 16px; }
.sx-share-label { font-family: var(--sx-mono-f); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--sx-fg-3); margin-right: 6px; }
.sx-share--stack { flex-direction: column; }
.sx-share--stack .sx-share-label { writing-mode: vertical-rl; transform: rotate(180deg); margin: 0 0 8px; }
.sx-share--row { margin-top: 48px; }
.sx-share button.is-copied { background: var(--sx-signal); border-color: var(--sx-signal) !important; color: #fff; }

/* Prose */
.sx-prose { font-size: 18px; line-height: 1.8; color: var(--sx-fg-2); min-width: 0; }
.sx-prose > * + * { margin-top: 1.15em; }
.sx-prose h2 { margin-top: 2.2em; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.2; letter-spacing: -.025em; font-weight: 500; color: var(--sx-fg); scroll-margin-top: 110px; }
.sx-prose h3 { margin-top: 1.8em; font-size: 22px; line-height: 1.3; letter-spacing: -.02em; font-weight: 500; color: var(--sx-fg); scroll-margin-top: 110px; }
.sx-prose h2 + *, .sx-prose h3 + * { margin-top: .7em; }
.sx-prose > :first-child { margin-top: 0; }
.sx-prose strong { color: var(--sx-fg); font-weight: 600; }
.sx-prose a { color: var(--sx-em); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sx-prose ul, .sx-prose ol { padding: 26px 28px; border-radius: 20px; background: var(--sx-raise); border: 1px solid var(--sx-line-soft); display: grid; gap: 12px; list-style: none; }
.sx-prose ul li, .sx-prose ol li { position: relative; padding-left: 34px; font-size: 16.5px; line-height: 1.65; }
.sx-prose ul li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255, 90, 31, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3L9.5 3.8' fill='none' stroke='%23ff5a1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.sx-prose ol { counter-reset: sx-ol; }
.sx-prose ol li { counter-increment: sx-ol; }
.sx-prose ol li::before { content: counter(sx-ol); position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--sx-inv-bg); color: var(--sx-inv-fg); font-size: 12px; font-family: var(--sx-mono-f); }
.sx-prose blockquote { margin-left: 0; margin-right: 0; padding: 30px 34px; border-radius: 20px; background: var(--sx-sunk); font-family: var(--sx-editorial-f); font-style: italic; font-size: 24px; line-height: 1.45; color: var(--sx-fg); }
.sx-prose img { max-width: 100%; height: auto; border-radius: 18px; }
.sx-prose figure { margin-left: 0; margin-right: 0; }
.sx-prose figcaption { margin-top: 10px; font-size: 14px; color: var(--sx-fg-3); text-align: center; }
.sx-prose table { width: 100%; border-collapse: collapse; font-size: 15.5px; border-radius: 16px; overflow: hidden; background: var(--sx-raise); }
.sx-prose th, .sx-prose td { padding: 14px 16px; text-align: left; }
.sx-prose th { background: var(--sx-inv-bg); color: var(--sx-inv-fg); font-weight: 500; }
.sx-prose tr:nth-child(even) td { background: var(--sx-tint); }

.sx-toc-label { display: block; font-family: var(--sx-mono-f); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--sx-fg-3); margin-bottom: 16px; }

/* Generated topic cover (posts without a featured image) */
.articles-generated-cover { position: relative; display: grid !important; place-items: center; min-height: 100%; aspect-ratio: 16 / 10; overflow: hidden; color: #fff; background: radial-gradient(60% 80% at 80% 10%, rgba(255, 90, 31, .55), transparent 60%), radial-gradient(60% 80% at 10% 100%, rgba(26, 55, 200, .7), transparent 60%), var(--sx-ink); }
.articles-generated-cover > span:not(.cover-text) { display: none; }
.articles-generated-cover .cover-text { display: flex; flex-direction: column; align-items: center; text-align: center; }
.articles-generated-cover strong { font-size: clamp(28px, 4vw, 56px); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.articles-generated-cover em { font-family: var(--sx-serif-f); font-style: italic; font-weight: 800; font-size: clamp(18px, 2.4vw, 32px); color: var(--sx-orange-2); }

/* ---------- 1. Classic ---------- */
.sx-ahero--classic { padding: 150px 0 0; text-align: left; }
.sx-ahero--classic .sx-narrow { margin: 0 auto; }
.sx-ahero--classic h1 { margin-top: 20px; }
.sx-acover--wide { margin-top: 56px; }
.sx-acover--wide img, .sx-acover--wide .articles-generated-cover { aspect-ratio: 21 / 9; border-radius: 28px; }

/* ---------- 2. Editorial ---------- */
.sx-ahero--editorial { min-height: 86vh; display: flex; align-items: flex-end; padding: 160px 0 72px; color: #fff; background: var(--sx-ink); overflow: hidden; }
.sx-ahero--editorial .sx-ahero-media { position: absolute; inset: 0; }
.sx-ahero--editorial .sx-ahero-media img, .sx-ahero--editorial .sx-ahero-media .articles-generated-cover { width: 100%; height: 100% !important; object-fit: cover; aspect-ratio: auto; }
.sx-ahero--editorial::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 9, 21, .45) 0%, rgba(6, 9, 21, .2) 40%, rgba(6, 9, 21, .92) 100%); }
.sx-ahero-over { position: relative; z-index: 1; width: 100%; }
.sx-ahero--editorial h1 { margin-top: 20px; max-width: 980px; color: #fff; font-size: clamp(40px, 5.6vw, 80px); }
.sx-ahero--editorial .sx-crumbs ol, .sx-ahero--editorial .sx-crumbs a { color: rgba(255, 255, 255, .7); }
.sx-ahero--editorial .sx-crumbs [aria-current] { color: #fff; }
.sx-standfirst { font-size: 23px; line-height: 1.55; color: var(--sx-fg); letter-spacing: -.01em; margin-bottom: 48px; }
.sx-prose--dropcap > p:first-of-type::first-letter { float: left; font-family: var(--sx-editorial-f); font-size: 5.2em; line-height: .82; padding: 6px 12px 0 0; color: var(--sx-orange); }

/* ---------- 3. Guide (table of contents) ---------- */
.sx-ahero--guide { padding: 150px 0 72px; background: var(--sx-bg-alt); }
.sx-ahero-guide-grid { display: grid; grid-template-columns: 1fr 380px; gap: 64px; align-items: end; }
.sx-ahero--guide h1 { margin-top: 20px; }
.sx-guide-count { position: relative; border-radius: 28px; overflow: hidden; background: var(--sx-ink); color: #fff; min-height: 320px; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; isolation: isolate; }
.sx-guide-count figure { position: absolute; inset: 0; margin: 0; z-index: -2; }
.sx-guide-count figure img, .sx-guide-count figure .articles-generated-cover { width: 100%; height: 100% !important; object-fit: cover; aspect-ratio: auto; }
.sx-guide-count::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 9, 21, .1), rgba(6, 9, 21, .88)); }
.sx-guide-count strong { font-size: 84px; font-weight: 500; letter-spacing: -.05em; line-height: .9; color: var(--sx-orange-2); }
.sx-guide-count span { margin-top: 8px; font-size: 15px; color: rgba(255, 255, 255, .85); }
.sx-abody-grid--toc { grid-template-columns: 300px minmax(0, 760px); justify-content: center; }
.sx-toc { position: sticky; top: 120px; padding: 26px; border-radius: 22px; background: var(--sx-raise); border: 1px solid var(--sx-line-soft); }
.sx-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sx-toc a { display: grid; grid-template-columns: 30px 1fr; gap: 6px; padding: 10px 12px; border-radius: 12px; font-size: 14.5px; line-height: 1.45; color: var(--sx-fg-2); transition: .2s; }
.sx-toc a span { font-family: var(--sx-mono-f); font-size: 12px; color: var(--sx-fg-3); padding-top: 1px; }
.sx-toc a:hover { background: var(--sx-tint); color: var(--sx-fg); }
.sx-toc a.is-active { background: rgba(255, 90, 31, .12); color: var(--sx-fg); }
.sx-toc a.is-active span { color: var(--sx-orange); }
.sx-toc .sx-share--row { margin-top: 22px; flex-wrap: wrap; }
.sx-prose--numbered { counter-reset: sx-h2; }
.sx-prose--numbered h2 { counter-increment: sx-h2; display: flex; gap: 16px; align-items: baseline; }
.sx-prose--numbered h2::before { content: counter(sx-h2, decimal-leading-zero); flex: none; font-family: var(--sx-mono-f); font-size: 14px; font-weight: 500; color: var(--sx-orange); padding: 6px 10px; border-radius: 10px; background: rgba(255, 90, 31, .12); transform: translateY(-4px); }

/* ---------- 4. Insight report ---------- */
.sx-ahero--report { padding: 140px 0 0; color: #fff; background: radial-gradient(60% 70% at 100% 0%, rgba(255, 90, 31, .35), transparent 60%), radial-gradient(50% 70% at 0% 100%, rgba(26, 55, 200, .5), transparent 60%), var(--sx-ink); }
.sx-ahero--report .sx-crumbs ol, .sx-ahero--report .sx-crumbs a { color: rgba(255, 255, 255, .65); }
.sx-ahero--report .sx-crumbs [aria-current] { color: #fff; }
.sx-report-top { display: grid; grid-template-columns: 1fr 360px; gap: 56px; align-items: end; }
.sx-ahero--report h1 { margin-top: 20px; color: #fff; }
.sx-report-facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sx-report-facts div { padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .07); }
.sx-report-facts dt { font-family: var(--sx-mono-f); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.sx-report-facts dd { margin: 4px 0 0; font-size: 15px; color: #fff; }
.sx-acover--report { margin-top: 48px; height: 440px; border-radius: 28px 28px 0 0; overflow: hidden; }
.sx-acover--report .articles-generated-cover { aspect-ratio: auto; }
.sx-abody-grid--report { grid-template-columns: 64px minmax(0, 1fr) 300px; gap: 48px; }
.sx-takeaways { position: sticky; top: 120px; padding: 26px; border-radius: 22px; background: var(--sx-raise); border: 1px solid var(--sx-line-soft); }
.sx-takeaways ol { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 6px; }
.sx-takeaways a { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 8px 0; font-size: 14.5px; line-height: 1.45; color: var(--sx-fg-2); }
.sx-takeaways a svg { width: 18px; height: 18px; color: var(--sx-signal); margin-top: 1px; }
.sx-takeaways a:hover, .sx-takeaways a.is-active { color: var(--sx-fg); }
.sx-takeaways p { font-size: 15px; color: var(--sx-fg-2); margin-bottom: 20px; }

/* ---------- 5. Spotlight ---------- */
.sx-ahero--spotlight { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 92vh; background: var(--sx-bg-alt); }
.sx-spot-media { position: relative; overflow: hidden; background: var(--sx-ink); }
.sx-spot-media img, .sx-spot-media .articles-generated-cover { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; aspect-ratio: auto; }
.sx-spot-panel { padding: 150px max(40px, calc((100vw - var(--sx-wrap)) / 2)) 72px 64px; display: flex; flex-direction: column; justify-content: center; }
.sx-spot-panel h1 { margin-top: 20px; font-size: clamp(34px, 3.8vw, 56px); }
.sx-spot-panel .sx-share--row { margin-top: 32px; }
.sx-abody-grid--spot { grid-template-columns: minmax(0, 760px) 320px; justify-content: center; gap: 72px; }
.sx-spot-aside { position: sticky; top: 120px; display: grid; gap: 16px; }
.sx-spot-card { padding: 28px; border-radius: 22px; background: var(--sx-raise); border: 1px solid var(--sx-line-soft); }
.sx-spot-card p { font-size: 15.5px; line-height: 1.65; color: var(--sx-fg-2); }
.sx-spot-card--ink { color: #fff; border-color: transparent; background: radial-gradient(80% 90% at 100% 0%, rgba(255, 90, 31, .45), transparent 60%), var(--sx-ink-2); }
.sx-spot-card--ink .sx-toc-label { color: rgba(255, 255, 255, .6); }
.sx-spot-card--ink p { color: rgba(255, 255, 255, .8); margin-bottom: 20px; }

/* ---------- 6. Magazine ---------- */
.sx-ahero--magazine { padding: 150px 0 0; text-align: center; }
.sx-mag-head .sx-crumbs ol { justify-content: center; }
.sx-mag-issue { display: inline-flex; gap: 0; border-radius: 999px; overflow: hidden; font-family: var(--sx-mono-f); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.sx-mag-issue span { padding: 8px 16px; background: var(--sx-inv-bg); color: var(--sx-inv-fg); }
.sx-mag-issue span + span { background: var(--sx-orange); color: #fff; }
.sx-ahero--magazine h1.sx-editorial { font-family: var(--sx-editorial-f); font-weight: 400; margin: 28px auto 0; max-width: 1100px; font-size: clamp(46px, 6.6vw, 104px); line-height: .98; letter-spacing: -.02em; font-style: normal; }
.sx-mag-dek { margin: 26px auto 0; max-width: 720px; font-size: 21px; line-height: 1.55; color: var(--sx-fg-2); }
.sx-acover--mag { margin-top: 56px; }
.sx-acover--mag img, .sx-acover--mag .articles-generated-cover { aspect-ratio: 16 / 7; border-radius: 28px; }
.sx-prose--mag > p:first-of-type { font-size: 22px; line-height: 1.6; color: var(--sx-fg); }
.sx-prose--mag h2 { font-family: var(--sx-editorial-f); font-weight: 400; font-size: clamp(30px, 3vw, 40px); letter-spacing: -.01em; }
.sx-also { margin: 2em 0 !important; padding: 26px 28px; border-radius: 20px; background: var(--sx-inv-bg); color: var(--sx-inv-fg); }
.sx-also a { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 8px; font-size: 20px; line-height: 1.35; font-weight: 500; color: inherit !important; text-decoration: none !important; letter-spacing: -.01em; }
.sx-also svg { width: 20px; height: 20px; flex: none; }

/* Related */
.sx-related .sx-post h3 { font-size: 20px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .sx-dhero-split { grid-template-columns: 1fr; gap: 48px; }
  .sx-dhero-stats { grid-template-columns: repeat(2, 1fr); }
  .sx-content .sme-features, .sx-content .features-grid, .sx-card-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .sx-content .sme-steps, .sx-content .steps-grid, .sx-card-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .sx-faq-grid { grid-template-columns: 1fr; gap: 32px; }
  .sx-faq-head { position: static; }
  .sx-detail-cta { flex-direction: column; align-items: flex-start; padding: 48px; }
  .sx-abody-grid--report { grid-template-columns: minmax(0, 1fr); }
  .sx-abody-grid--report .sx-arail { display: none; }
  .sx-takeaways { position: static; order: -1; }
  .sx-abody-grid--toc, .sx-abody-grid--spot { grid-template-columns: minmax(0, 1fr); }
  .sx-toc, .sx-spot-aside { position: static; }
  .sx-report-top, .sx-ahero-guide-grid { grid-template-columns: 1fr; gap: 32px; }
  .sx-ahero--spotlight { grid-template-columns: 1fr; min-height: 0; }
  .sx-spot-media { min-height: 420px; }
  .sx-spot-panel { padding: 56px var(--sx-gutter); }
}

@media (max-width: 820px) {
  .sx-dhero { padding: 120px 0 64px; }
  .sx-dhero--photo { min-height: 640px; padding: 130px 0 32px; }
  .sx-case-cover { height: 380px; border-radius: 22px 22px 0 0; }
  .sx-case-cover-bar { flex-wrap: wrap; gap: 14px 24px; left: 12px; right: 12px; bottom: 12px; padding: 16px; }
  .sx-case-cover-bar .sx-btn { margin-left: 0; width: 100%; }
  .sx-content .sme-section, .sx-content .section { padding: 72px 0; }
  .sx-content .sme-ps, .sx-content .ps-grid, .sx-content .sme-features, .sx-content .features-grid,
  .sx-content .sme-steps, .sx-content .steps-grid, .sx-card-grid--3, .sx-card-grid--4, .sx-content .sme-usecase ul { grid-template-columns: 1fr; }
  .sx-content .sme-ps-card, .sx-content .ps-card, .sx-content .sme-usecase { padding: 28px 24px; }
  .sx-detail-cta { padding: 36px 24px; border-radius: 24px; }
  .sx-abody { padding: 48px 0 88px; }
  .sx-abody--rail .sx-abody-grid { grid-template-columns: minmax(0, 1fr); }
  .sx-abody--rail .sx-arail { display: none; }
  .sx-prose { font-size: 17px; }
  .sx-ahero--classic, .sx-ahero--magazine { padding-top: 116px; }
  .sx-acover--wide img, .sx-acover--mag img, .sx-acover--wide .articles-generated-cover, .sx-acover--mag .articles-generated-cover { aspect-ratio: 4 / 3; border-radius: 20px; }
  .sx-ahero--editorial { min-height: 640px; padding-bottom: 40px; }
  .sx-acover--report { height: 260px; }
  .sx-report-facts { grid-template-columns: 1fr 1fr; }
  .sx-spot-media { min-height: 300px; }
}

/* =========================================================
   GENERIC PAGES & LEGAL (Terms, Privacy)
   ========================================================= */
.sx-dhero--page, .sx-dhero--search { padding-bottom: 72px; }
.sx-dhero--page h1 { max-width: 900px; }
.sx-page--legal .sx-abody { padding-top: 56px; }
.sx-toc--legal nav.legal-toc { margin: 0; }
.sx-toc--legal h2 { margin: 0 0 16px; font-family: var(--sx-mono-f); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--sx-fg-3); }
.sx-toc--legal ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sx-toc--legal a { display: block; padding: 9px 12px; border-radius: 12px; font-size: 14px; line-height: 1.45; color: var(--sx-fg-2); transition: .2s; text-decoration: none; }
.sx-toc--legal a:hover { background: var(--sx-tint); color: var(--sx-fg); }
.sx-toc--legal a.is-active { background: rgba(255, 90, 31, .12); color: var(--sx-fg); }

.sx-legal .smartme-legal-page > * + * { margin-top: 28px; }
.sx-legal .legal-summary { padding: 28px 30px; border-radius: 22px; color: #fff; background: radial-gradient(80% 100% at 100% 0%, rgba(255, 90, 31, .4), transparent 60%), radial-gradient(70% 90% at 0% 100%, rgba(26, 55, 200, .55), transparent 60%), var(--sx-ink-2); }
.sx-legal .legal-kicker { display: block; font-family: var(--sx-mono-f); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.sx-legal .legal-summary p { margin: 8px 0 0; font-size: 20px; line-height: 1.45; color: #fff; font-weight: 500; letter-spacing: -.01em; }
.sx-legal .legal-meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.sx-legal .legal-meta-card { padding: 18px 20px; border-radius: 16px; background: var(--sx-raise); border: 1px solid var(--sx-line-soft); }
.sx-legal .legal-meta-card span { display: block; font-family: var(--sx-mono-f); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--sx-fg-3); }
.sx-legal .legal-meta-card strong { display: block; margin-top: 6px; font-size: 15px; line-height: 1.5; font-weight: 500; color: var(--sx-fg); }
.sx-legal .legal-section { padding: 30px 32px; border-radius: 22px; background: var(--sx-raise); border: 1px solid var(--sx-line-soft); scroll-margin-top: 110px; }
.sx-legal .legal-section h2 { margin: 0 0 14px; display: flex; align-items: center; gap: 14px; font-size: 24px; }
.sx-legal .legal-section h2 span { flex: none; font-family: var(--sx-mono-f); font-size: 13px; font-weight: 500; color: var(--sx-orange); padding: 6px 10px; border-radius: 10px; background: rgba(255, 90, 31, .12); }
.sx-legal .legal-section p { font-size: 16.5px; line-height: 1.75; }
.sx-legal .legal-section p + p { margin-top: .9em; }
.sx-legal .legal-section ul, .sx-legal .legal-section ol { margin-top: 14px; background: var(--sx-sunk); border: 0; }

/* =========================================================
   SEARCH
   ========================================================= */
.sx-search-inline { margin-top: 32px; max-width: 680px; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 20px; border-radius: 999px; background: var(--sx-raise); border: 1px solid var(--sx-line); box-shadow: var(--sx-shadow); }
.sx-search-inline > span svg { width: 20px; height: 20px; color: var(--sx-fg-3); display: block; }
.sx-search-inline input { flex: 1; min-width: 0; height: 46px; border: 0; outline: none; background: transparent; color: var(--sx-fg); font: inherit; font-size: 17px; }
.sx-search-inline input::placeholder { color: var(--sx-fg-3); }
.sx-search-results { padding-top: 56px; }
.sx-search-chips { margin-bottom: 32px; }
.sx-search-chips .sx-chip { display: inline-flex; align-items: center; gap: 8px; }
.sx-search-chips .sx-chip span { font-family: var(--sx-mono-f); font-size: 11.5px; opacity: .7; }
.sx-results { display: grid; gap: 14px; }
.sx-result { display: grid; grid-template-columns: 220px 1fr 56px; gap: 28px; align-items: center; padding: 14px 24px 14px 14px; border-radius: 22px; background: var(--sx-raise); border: 1px solid var(--sx-line-soft); transition: transform .4s var(--sx-ease), box-shadow .4s; }
.sx-result:hover { transform: translateY(-3px); box-shadow: var(--sx-shadow); }
.sx-result-media { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, var(--sx-ink-3), var(--sx-ink)); }
.sx-result-media img { width: 100%; height: 100% !important; object-fit: cover; }
.sx-result-media img.is-illustration { object-fit: contain; padding: 12px; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .45)); }
.sx-result-ic { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: rgba(255, 90, 31, .16); color: var(--sx-orange-2); }
.sx-result-ic svg { width: 24px; height: 24px; }
.sx-result-meta { display: flex; align-items: center; gap: 10px; font-family: var(--sx-mono-f); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--sx-fg-3); }
.sx-result-meta b { color: var(--sx-orange); font-weight: 500; }
.sx-result-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--sx-fg-3); }
.sx-result h2 { margin-top: 8px; font-size: 22px; font-weight: 500; letter-spacing: -.02em; line-height: 1.3; color: var(--sx-fg); }
.sx-result p { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--sx-fg-2); }
.sx-result mark { background: rgba(255, 90, 31, .18); color: inherit; border-radius: 4px; padding: 0 3px; }
.sx-result-url { display: block; margin-top: 10px; font-family: var(--sx-mono-f); font-size: 12px; color: var(--sx-fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-result-go { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--sx-tint); color: var(--sx-fg); transition: .3s var(--sx-ease); }
.sx-result-go svg { width: 18px; height: 18px; }
.sx-result:hover .sx-result-go { background: var(--sx-orange); color: #fff; transform: rotate(-45deg); }
.sx-pagination { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sx-pagination a, .sx-pagination span { min-width: 46px; height: 46px; padding: 0 14px; border-radius: 999px; display: inline-grid; place-items: center; border: 1px solid var(--sx-line); color: var(--sx-fg); font-size: 15px; }
.sx-pagination .current { background: var(--sx-inv-bg); color: var(--sx-inv-fg); border-color: var(--sx-inv-bg); }
.sx-pagination a:hover { border-color: var(--sx-fg); }
.sx-pagination svg { width: 16px; height: 16px; }
.sx-search-empty { max-width: 640px; margin: 0 auto; padding: 56px 40px; text-align: center; border-radius: 28px; background: var(--sx-raise); border: 1px solid var(--sx-line-soft); }
.sx-search-empty .sx-result-ic { margin: 0 auto; }
.sx-search-empty h2 { margin-top: 22px; font-size: 28px; font-weight: 500; letter-spacing: -.02em; color: var(--sx-fg); }
.sx-search-empty p { margin-top: 10px; color: var(--sx-fg-2); }
.sx-search-suggest { margin: 26px 0 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sx-search-suggest .sx-chip { display: inline-flex; align-items: center; }

@media (max-width: 1100px) {
  .sx-result { grid-template-columns: 160px 1fr; }
  .sx-result-go { display: none; }
}
@media (max-width: 820px) {
  .sx-legal .legal-meta-grid { grid-template-columns: 1fr; }
  .sx-legal .legal-section { padding: 24px 20px; }
  .sx-result { grid-template-columns: 1fr; padding: 12px; gap: 14px; }
  .sx-result-body { padding: 0 8px 8px; }
}

/* =========================================================
   SERVICES ARCHIVE (grouped like the Products menu)
   ========================================================= */
.sx-svc-jump { margin-top: 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sx-svc-jump a { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; background: var(--sx-raise); border: 1px solid var(--sx-line-soft); transition: transform .35s var(--sx-ease), box-shadow .35s, border-color .3s; }
.sx-svc-jump a:hover { transform: translateY(-3px); box-shadow: var(--sx-shadow); border-color: var(--sx-orange); }
.sx-svc-jump-ic { flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--sx-orange), var(--sx-orange-2)); }
.sx-svc-jump-ic svg { width: 20px; height: 20px; }
.sx-svc-jump b { display: block; font-size: 15.5px; font-weight: 600; color: var(--sx-fg); }
.sx-svc-jump small { display: block; font-size: 12.5px; color: var(--sx-fg-3); }
.sx-svc-group { scroll-margin-top: 80px; }
.sx-svc-group .sx-head { margin-bottom: 40px; }
.sx-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sx-svc-tile { position: relative; display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden; border-radius: 24px; background: var(--sx-raise); border: 1px solid var(--sx-line-soft); color: inherit; font: inherit; cursor: pointer; transition: transform .4s var(--sx-ease), box-shadow .4s; }
.sx-svc-tile:hover { transform: translateY(-4px); box-shadow: var(--sx-shadow); }
.sx-svc-tile-media { display: grid; place-items: center; height: 210px; padding: 22px; background: radial-gradient(60% 70% at 50% 60%, rgba(255, 90, 31, .26), transparent 70%), radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(160deg, var(--sx-ink-3), var(--sx-ink)); }
.sx-svc-tile-media { overflow: hidden; }
.sx-svc-tile-media img { max-height: 166px !important; max-width: 100%; height: auto; width: auto; object-fit: contain; filter: drop-shadow(0 20px 26px rgba(0, 0, 0, .45)); transition: transform .8s var(--sx-ease); }
.sx-svc-tile:hover .sx-svc-tile-media img { transform: scale(1.05); }
.sx-svc-tile-body { display: flex; flex-direction: column; gap: 8px; padding: 24px 26px 64px; }
.sx-svc-tile-title { font-size: 19px; font-weight: 500; letter-spacing: -.02em; line-height: 1.3; color: var(--sx-fg); }
.sx-svc-tile-desc { font-size: 14.5px; line-height: 1.6; color: var(--sx-fg-2); }
.sx-svc-tile-go { position: absolute; right: 22px; bottom: 20px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--sx-tint); color: var(--sx-fg); transition: .35s var(--sx-ease); }
.sx-svc-tile-go svg { width: 16px; height: 16px; }
.sx-svc-tile:hover .sx-svc-tile-go { background: var(--sx-orange); color: #fff; transform: rotate(-45deg); }
button.sx-svc-tile:hover .sx-svc-tile-go { transform: none; }
@media (max-width: 1100px) { .sx-svc-jump { grid-template-columns: repeat(2, 1fr); } .sx-svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) { .sx-svc-jump, .sx-svc-grid { grid-template-columns: 1fr; } .sx-svc-tile-media { height: 180px; } }