/* Mobile refinement of the accepted service layouts. Loaded only by the finite
   40-service release. Incumbent artwork, copy and desktop styles stay authoritative.
   Contact, calculator, header and compact footer own their separate layouts. */
@media (max-width: 767px) {
  body[data-service-shell="compact-v1"]:has([data-service-hero-artwork="b-v1"]) section:not(#contact):not(#kalkulator):not(#contact *):not(#kalkulator *):not(:has([data-service-hero-artwork="b-v1"])) {
    padding-block: 40px !important;
  }

  body[data-service-shell="compact-v1"]:has([data-service-hero-artwork="b-v1"]) section:not(#contact):not(#kalkulator):not(#contact *):not(#kalkulator *) > .container {
    padding-inline: 20px;
  }

  body[data-service-shell="compact-v1"] section:has([data-service-hero-artwork="b-v1"]) {
    padding-top: 104px !important;
    padding-bottom: 36px !important;
  }

  body[data-service-shell="compact-v1"] section:has([data-service-hero-artwork="b-v1"]) > .container > .flex {
    gap: 24px;
  }

  body[data-service-shell="compact-v1"] section:has([data-service-hero-artwork="b-v1"]) :has(> h1) {
    width: 100%;
    min-width: 0;
    margin-bottom: 0;
    text-align: left;
  }

  body[data-service-shell="compact-v1"] section:has([data-service-hero-artwork="b-v1"]) h1 {
    margin-bottom: 18px;
    font-size: clamp(32px, 9.1vw, 40px);
    line-height: 1.12;
    letter-spacing: -.03em;
    text-wrap: balance;
    overflow-wrap: break-word;
  }

  body[data-service-shell="compact-v1"] section:has([data-service-hero-artwork="b-v1"]) :has(> h1) > p {
    margin: 0 0 22px;
    max-width: 46ch;
    font-size: 16px;
    line-height: 1.65;
  }

  body[data-service-shell="compact-v1"] section:has([data-service-hero-artwork="b-v1"]) :has(> h1) > .inline-flex {
    max-width: 100%;
    margin-bottom: 18px;
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .12em;
  }

  body[data-service-shell="compact-v1"] section:has([data-service-hero-artwork="b-v1"]) :has(> h1) > ul {
    justify-content: flex-start;
    gap: 8px 16px;
    margin-bottom: 22px;
    font-size: 14px;
    line-height: 1.5;
  }

  body[data-service-shell="compact-v1"] section:has([data-service-hero-artwork="b-v1"]) :has(> h1) > .flex:has(> a) {
    width: 100%;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
  }

  body[data-service-shell="compact-v1"] section:has([data-service-hero-artwork="b-v1"]) :has(> h1) > .flex > a {
    min-height: 50px;
    padding: 12px 18px;
    font-size: 15px;
    line-height: 1.5;
    touch-action: manipulation;
  }

  body[data-service-shell="compact-v1"] section:has([data-service-hero-artwork="b-v1"]) :has(> h1) > .border-t {
    margin-top: 24px;
    padding-top: 18px;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px 18px;
    font-size: 13px;
    line-height: 1.5;
  }

  body[data-service-shell="compact-v1"] [data-service-hero-artwork="b-v1"] .service-hero-artwork__image {
    width: calc(100% + 24px);
    margin-inline: -12px;
  }

  body[data-service-shell="compact-v1"] [data-service-hero-artwork="b-v1"] .service-hero-artwork__caption {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.6;
  }

  body[data-service-shell="compact-v1"]:has([data-service-hero-artwork="b-v1"]) section:not(#contact):not(#kalkulator):not(#contact *):not(#kalkulator *) > .container > :is(.text-center, [class*="max-w-"]) {
    margin-bottom: 24px !important;
  }

  body[data-service-shell="compact-v1"]:has([data-service-hero-artwork="b-v1"]) section:not(#contact):not(#kalkulator):not(#contact *):not(#kalkulator *) h2 {
    font-size: clamp(26px, 7.2vw, 32px);
    line-height: 1.2;
    letter-spacing: -.025em;
    text-wrap: balance;
    overflow-wrap: break-word;
  }

  body[data-service-shell="compact-v1"]:has([data-service-hero-artwork="b-v1"]) section:not(#contact):not(#kalkulator):not(#contact *):not(#kalkulator *) p.text-sm {
    font-size: 16px;
    line-height: 1.65;
    letter-spacing: normal;
  }

  body[data-service-shell="compact-v1"]:has([data-service-hero-artwork="b-v1"]) section:not(#contact):not(#kalkulator):not(#contact *):not(#kalkulator *) [data-scroll-rail][data-mobile-only] {
    gap: 16px !important;
    margin-inline: -20px;
    padding-inline: 20px;
    scroll-padding-inline: 20px;
    align-items: stretch;
  }

  body[data-service-shell="compact-v1"]:has([data-service-hero-artwork="b-v1"]) section:not(#contact):not(#kalkulator):not(#contact *):not(#kalkulator *) [data-scroll-rail][data-mobile-only] > * {
    flex-basis: min(calc(100vw - 64px), 352px);
    min-width: 0;
  }

  body[data-service-shell="compact-v1"]:has([data-service-hero-artwork="b-v1"]) section:not(#contact):not(#kalkulator):not(#contact *):not(#kalkulator *) [data-scroll-rail] > :is(.p-8, .p-10, .p-12) {
    padding: 24px;
  }

  body[data-service-shell="compact-v1"]:has([data-service-hero-artwork="b-v1"]) section:not(#contact):not(#kalkulator):not(#contact *):not(#kalkulator *) [data-scroll-rail] > .rich-feature-card {
    flex: 0 0 min(calc(100vw - 64px), 352px);
    min-width: 0;
    padding: 24px;
  }

  body[data-service-shell="compact-v1"]:has([data-service-hero-artwork="b-v1"]) section:not(#contact):not(#kalkulator):not(#contact *):not(#kalkulator *) [data-scroll-rail] > * :is(h2, h3, p, li) {
    overflow-wrap: break-word;
  }

  /* A narrow fade leaves the review text legible on a phone. */
  body[data-service-shell="compact-v1"]:has([data-service-hero-artwork="b-v1"]) section:has(#reviews-track) > .relative > .absolute {
    width: 24px;
  }

  body[data-service-shell="compact-v1"]:has([data-service-hero-artwork="b-v1"]) section:has(#reviews-track) > .container {
    margin-bottom: 24px;
  }
}

/* The five newer services already have a separate mobile composition. Only the
   cramped phone columns and descriptive type need the same reading comfort. */
@media (max-width: 540px) {
  body[data-service-shell="compact-v1"].ai-service-page .aix-page-content :is(.aix-hero-copy > p, .aix-section-title > p, .aix-card-copy p, .aix-steps p, .aix-outcomes p, .aix-section-note, .aix-faq summary, .aix-faq details p, .aix-close p) {
    font-size: 16px;
    line-height: 1.65;
  }

  body[data-service-shell="compact-v1"].ai-service-page .aix-services-grid .aix-service-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  body[data-service-shell="compact-v1"].ai-service-page .aix-services-grid .aix-card-art {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 1.75;
  }

  body[data-service-shell="compact-v1"].ai-service-page .aix-services-grid .aix-card-art img {
    object-fit: contain;
  }

  body[data-service-shell="compact-v1"].ai-service-page .aix-card-copy h3 {
    font-size: 20px;
    line-height: 1.3;
  }

  body[data-service-shell="compact-v1"].ai-service-page .aix-steps {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 24px 20px;
  }

  body[data-service-shell="compact-v1"].ai-service-page .aix-steps > li {
    align-items: flex-start;
    padding-inline: 0;
    text-align: left;
  }

  body[data-service-shell="compact-v1"].ai-service-page .aix-steps p {
    max-width: 40ch;
  }

  body[data-service-shell="compact-v1"].audit-it-ot-page .aiot-scope-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 22px;
  }

  body[data-service-shell="compact-v1"].audit-it-ot-page .aiot-scope-card .aiot-equipment {
    width: min(100%, 240px);
    margin-inline: auto;
  }

  body[data-service-shell="compact-v1"].audit-it-ot-page .aiot-scope-card h3 {
    font-size: 20px;
  }

  body[data-service-shell="compact-v1"].audit-it-ot-page :is(.aiot-lead, .aiot-section-heading > p, .aiot-scope-card ul, .aiot-process p, .aiot-deliverables p, .aiot-faq details > p) {
    font-size: 16px;
    line-height: 1.65;
  }
}

/* Full-scroll pass: content is present immediately; navigation keeps its own states. */
@media (max-width: 767px) {
  body[data-service-shell="compact-v1"] section:not(#contact):not(#kalkulator):not(#contact *):not(#kalkulator *) .fade-in-section,
  body[data-service-shell="compact-v1"] section.fade-in-section:not(#contact):not(#kalkulator) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  body[data-service-shell="compact-v1"]:has([data-service-hero-artwork="b-v1"]) section:not(#contact):not(#kalkulator):not(#contact *):not(#kalkulator *):not(:has([data-service-hero-artwork])) :is(p.text-sm, p.text-lg, .leading-relaxed > p) {
    font-size: 16px;
    line-height: 1.5;
  }

  body[data-service-shell="compact-v1"] [data-scroll-rail][data-mobile-only] {
    align-items: flex-start !important;
    padding-top: 4px;
    padding-bottom: 16px;
  }

  body[data-service-shell="compact-v1"] [data-scroll-rail][data-mobile-only] > .h-full {
    height: auto;
  }

  /* The paired narratives must read in vertical scroll. A nested four-card grid
     is not a single carousel slide with the height of four desktop panels. */
  body[data-service-shell="compact-v1"] [data-scroll-rail][data-mobile-only]:has(> .bg-slate-900) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px !important;
    margin-inline: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none;
    align-items: start !important;
  }

  body[data-service-shell="compact-v1"] [data-scroll-rail][data-mobile-only]:has(> .bg-slate-900) > * {
    width: 100%;
    height: auto;
    min-width: 0;
    padding: 20px !important;
    flex-basis: auto;
  }

  body[data-service-shell="compact-v1"] [data-scroll-rail][data-mobile-only]:has(> .bg-slate-900) > .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0 !important;
  }

  body[data-service-shell="compact-v1"] [data-scroll-rail][data-mobile-only]:has(> .bg-slate-900) > .grid > * {
    min-width: 0;
    padding: 16px;
  }

  body[data-service-shell="compact-v1"] [data-scroll-rail][data-mobile-only]:has(> .bg-slate-900) > .grid :is(.text-2xl, .text-3xl, .text-4xl) {
    font-size: 22px;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body[data-service-shell="compact-v1"] [data-scroll-rail][data-mobile-only]:has(> .bg-slate-900) > .bg-slate-900 > .inline-flex {
    max-width: 100%;
    padding: 6px 10px;
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .09em;
    white-space: normal;
  }

  body[data-service-shell="compact-v1"] [data-scroll-rail][data-mobile-only]:has(> .bg-slate-900) :is(.mt-10, .pt-8) {
    margin-top: 20px;
  }

  /* Preserve balanced CTA padding; only the pt-8 content wrapper needs a reset. */
  body[data-service-shell="compact-v1"] [data-scroll-rail][data-mobile-only]:has(> .bg-slate-900) .pt-8 {
    padding-top: 0;
  }

  body[data-service-shell="compact-v1"] [data-scroll-rail][data-mobile-only]:has(> .bg-slate-900) .mb-8 {
    margin-bottom: 20px;
  }

  body[data-service-shell="compact-v1"] [data-scroll-rail][data-mobile-only]:has(> .bg-slate-900) > .bg-slate-900 .space-y-4 > .flex {
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
  }

  body[data-service-shell="compact-v1"] [data-scroll-rail][data-mobile-only]:has(> .bg-slate-900) > .bg-slate-900 .space-y-4 > .flex > :first-child {
    flex-shrink: 0;
  }

  body[data-service-shell="compact-v1"] [data-scroll-rail][data-mobile-only]:has(> .bg-white) > .bg-slate-900 .space-y-4 > .flex > :first-child {
    width: 28px;
    height: 28px;
    border-radius: 9px;
  }

  body[data-service-shell="compact-v1"] [data-scroll-rail][data-mobile-only]:has(> .bg-slate-900) > .bg-slate-900 h3 {
    font-size: 20px;
    line-height: 1.3;
  }

  /* Retain the existing comparison cards and icons, arranged as compact rows. */
  body[data-service-shell="compact-v1"] [data-scroll-rail][data-mobile-only]:has(> .bg-slate-900) > .bg-white > .grid:not(.text-center) {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  body[data-service-shell="compact-v1"] [data-scroll-rail][data-mobile-only]:has(> .bg-slate-900) > .bg-white > .grid:not(.text-center) > * {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: start;
    gap: 6px 12px;
    padding: 14px;
  }

  body[data-service-shell="compact-v1"] [data-scroll-rail][data-mobile-only]:has(> .bg-slate-900) > .bg-white > .grid:not(.text-center) > * > div:first-child {
    grid-row: span 2;
    width: 32px;
    height: 32px;
    margin: 0;
    border-radius: 10px;
  }

  body[data-service-shell="compact-v1"] [data-scroll-rail][data-mobile-only]:has(> .bg-slate-900) > .bg-white > .grid:not(.text-center) :is(h4, p) {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
  }

  body[data-service-shell="compact-v1"] [data-scroll-rail][data-mobile-only]:has(> .bg-slate-900) > .bg-white > .grid.text-center {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-block: 20px;
    padding: 12px 8px;
  }

  body[data-service-shell="compact-v1"] [data-scroll-rail][data-mobile-only]:has(> .bg-slate-900) > .bg-white > .grid.text-center p.text-3xl {
    font-size: 24px;
    line-height: 1.2;
  }

  body[data-service-shell="compact-v1"] [data-scroll-rail][data-mobile-only]:has(> .bg-slate-900) > .bg-white > .grid.text-center p.text-xs {
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: .025em;
  }

  body[data-service-shell="compact-v1"] [data-scroll-rail][data-mobile-only]:has(> [data-service-offer-engagement]) {
    padding-top: 22px;
  }

  body[data-service-shell="compact-v1"] #process .relative.mb-20 {
    margin-bottom: 24px;
  }

  body[data-service-shell="compact-v1"] #process [data-scroll-rail] > article {
    height: auto;
  }

  body[data-service-shell="compact-v1"] #process article > .h-full {
    height: auto;
    min-height: 0;
  }

  body[data-service-shell="compact-v1"] #process article :is(p.text-xs, ul.text-xs) {
    font-size: 14px;
    line-height: 1.5;
  }

  body[data-service-shell="compact-v1"] #process article .font-mono {
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 12px;
    line-height: 1.5;
  }

  body[data-service-shell="compact-v1"] #cases > .container > .flex {
    align-items: flex-start;
    margin-bottom: 20px;
  }

  body[data-service-shell="compact-v1"] #cases h2 {
    margin-bottom: 0;
  }

  body[data-service-shell="compact-v1"] #portfolio-container {
    padding-bottom: 12px;
  }

  body[data-service-shell="compact-v1"] #portfolio-container:has(> :is(a, article)) {
    display: flex;
    gap: 16px;
    margin-inline: -20px;
    padding-inline: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    -webkit-overflow-scrolling: touch;
  }

  body[data-service-shell="compact-v1"] #portfolio-container > :is(a, article) {
    flex: 0 0 min(calc(100vw - 64px), 352px);
    min-width: 0;
    height: auto;
    scroll-snap-align: start;
  }

  body[data-service-shell="compact-v1"] #portfolio-container > :is(a, article) > .h-72 {
    height: clamp(168px, 48vw, 210px);
  }

  body[data-service-shell="compact-v1"] #portfolio-container > :is(a, article) > .p-8 {
    padding: 20px;
  }

  body[data-service-shell="compact-v1"] #portfolio-container > :is(a, article) h3 {
    margin-bottom: 12px;
    font-size: 20px;
    line-height: 1.3;
  }

  body[data-service-shell="compact-v1"] #portfolio-container > :is(a, article) p {
    margin-bottom: 16px;
    font-size: 16px;
    line-height: 1.5;
  }

  body[data-service-shell="compact-v1"] #portfolio-container > :is(a, article) .pt-8 {
    padding-top: 16px;
  }

  body[data-service-shell="compact-v1"] #portfolio-container > .col-span-full {
    padding-block: 20px;
  }

  body[data-service-shell="compact-v1"]:has([data-service-hero-artwork="b-v1"]) section:not(#contact):not(#kalkulator):not(#contact *):not(#kalkulator *) details {
    padding: 18px;
  }

  body[data-service-shell="compact-v1"]:has([data-service-hero-artwork="b-v1"]) section:not(#contact):not(#kalkulator):not(#contact *):not(#kalkulator *) details summary {
    gap: 12px;
    font-size: 16px;
    line-height: 1.5;
  }

  body[data-service-shell="compact-v1"]:has([data-service-hero-artwork="b-v1"]) section:not(#contact):not(#kalkulator):not(#contact *):not(#kalkulator *) details summary > span {
    flex-shrink: 0;
  }

  body[data-service-shell="compact-v1"]:has([data-service-hero-artwork="b-v1"]) section:not(#contact):not(#kalkulator):not(#contact *):not(#kalkulator *) details > div {
    margin-top: 12px;
    padding-left: 0;
    font-size: 16px;
    line-height: 1.5;
  }

  body[data-service-shell="compact-v1"]:has([data-service-hero-artwork="b-v1"]) section:not(#contact):not(#kalkulator):not(#contact *):not(#kalkulator *) > .container:has(> .flex > span.rounded-full) > .flex {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body[data-service-shell="compact-v1"]:has([data-service-hero-artwork="b-v1"]) section:not(#contact):not(#kalkulator):not(#contact *):not(#kalkulator *) > .container:has(> .flex > span.rounded-full) > .flex > span {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.4;
  }

  body[data-service-shell="compact-v1"]:has([data-service-hero-artwork="b-v1"]) section:not(#contact):not(#kalkulator):not(#contact *):not(#kalkulator *) > .container:has(> .flex > span.rounded-full) > .mt-8 {
    margin-top: 20px;
  }

  /* Calculator rules opt into the real service mount, never city calculators. */
  body[data-service-shell="compact-v1"] [data-service-calculator-canonical] .ccc-head {
    gap: 16px;
    margin-bottom: 20px;
  }

  body[data-service-shell="compact-v1"] [data-service-calculator-canonical] .ccc-head h2 {
    max-width: 22ch;
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -.025em;
  }

  body[data-service-shell="compact-v1"] [data-service-calculator-canonical] :is(.ccc-head > p, .ccc-policy-note) {
    font-size: 16px;
    line-height: 1.5;
  }

  body[data-service-shell="compact-v1"] [data-service-calculator-canonical] .ccc-step {
    padding: 0 !important;
  }

  body[data-service-shell="compact-v1"] [data-service-calculator-canonical] .ccc-step + .ccc-step {
    margin-top: 20px;
  }

  body[data-service-shell="compact-v1"] [data-service-calculator-canonical] .ccc-step__head h3 {
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: .025em;
  }

  body[data-service-shell="compact-v1"] [data-service-calculator-canonical] .ccc-step__head small {
    font-size: 12px;
    line-height: 1.4;
  }

  body[data-service-shell="compact-v1"] [data-service-calculator-canonical] :is(.ccc-tier, .ccc-addon) {
    gap: 6px 8px;
    padding: 12px 10px;
    align-content: start;
  }

  body[data-service-shell="compact-v1"] [data-service-calculator-canonical] .ccc-tier__title {
    font-size: 15px;
    line-height: 1.35;
  }

  body[data-service-shell="compact-v1"] [data-service-calculator-canonical] :is(.ccc-tier__detail, .ccc-tier__price, .ccc-addon__copy strong, .ccc-addon__copy small, .ccc-addon__price) {
    font-size: 14px;
    line-height: 1.45;
  }

  body[data-service-shell="compact-v1"] [data-service-calculator-canonical] :is(.ccc-quote h3, .ccc-budget > p, .ccc-summary > p) {
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: .025em;
  }

  body[data-service-shell="compact-v1"] [data-service-calculator-canonical] :is(.ccc-quote header div > span, .ccc-quote header > span) {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: .025em;
  }

  body[data-service-shell="compact-v1"] [data-service-calculator-canonical] :is(.ccc-budget > small, .ccc-summary li, .ccc-trust li) {
    font-size: 14px;
    line-height: 1.5;
  }

  body[data-service-shell="compact-v1"] [data-service-calculator-canonical] .ccc-cta {
    min-height: 50px !important;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
  }

  body[data-service-shell="compact-v1"].ai-service-page .aix-page-content :is(.aix-hero-copy > p, .aix-section-title > p, .aix-card-copy p, .aix-steps p, .aix-outcomes p, .aix-section-note, .aix-faq summary, .aix-faq details p, .aix-close p, .aix-conversation-note p) {
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: normal;
  }

  body[data-service-shell="compact-v1"].ai-service-page :is(.aix-steps h3, .aix-outcomes h3) {
    font-size: 18px;
    line-height: 1.35;
  }

  body[data-service-shell="compact-v1"].ai-service-page .aix-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-service-shell="compact-v1"].ai-service-page .aix-outcomes {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  body[data-service-shell="compact-v1"].ai-service-page .aix-outcomes article {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    column-gap: 18px;
    min-height: 0;
    padding-left: 0;
  }

  body[data-service-shell="compact-v1"].ai-service-page .aix-outcomes article > span {
    position: relative;
    grid-row: span 2;
    margin: 0;
  }

  body[data-service-shell="compact-v1"].ai-service-page .aix-outcomes :is(h3, p) {
    margin: 0;
  }

  body[data-service-shell="compact-v1"].ai-service-page .aix-faq summary {
    min-height: 44px;
  }

  body[data-service-shell="compact-v1"].audit-it-ot-page :is(.aiot-section-heading > p, .aiot-scope-card ul, .aiot-process p, .aiot-deliverables p, .aiot-faq details > p) {
    font-size: 16px;
    line-height: 1.5;
  }

  body[data-service-shell="compact-v1"].audit-it-ot-page :is(.aiot-scope-grid, .aiot-process, .aiot-deliverables, .aiot-faq-grid) {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-service-shell="compact-v1"].audit-it-ot-page .aiot-faq summary {
    font-size: 16px;
    line-height: 1.5;
  }
}

@media (min-width: 375px) and (max-width: 767px) {
  body[data-service-shell="compact-v1"] [data-service-calculator-canonical] :is(.ccc-tiers, .ccc-addons) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-service-shell="compact-v1"] [data-service-calculator-canonical] :is(.ccc-tier:nth-child(odd), .ccc-addon:nth-child(odd)) {
    border-left: 0;
  }

  body[data-service-shell="compact-v1"] [data-service-calculator-canonical] :is(.ccc-tier:nth-child(even), .ccc-addon:nth-child(even)) {
    border-left: 1px solid var(--ccc-line);
  }
}

@media (max-width: 540px) {
  body[data-service-shell="compact-v1"].ai-service-page .aix-services-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Long KPI terms use compact full-width readout rows instead of broken words. */
@media (max-width: 767px) {
  body[data-service-shell="compact-v1"] [data-scroll-rail][data-mobile-only]:has(> .bg-slate-900) > .grid:has(> * > .text-2xl) {
    grid-template-columns: minmax(0, 1fr);
  }
  body[data-service-shell="compact-v1"] [data-scroll-rail][data-mobile-only]:has(> .bg-slate-900) > .grid:has(> * > .text-2xl) > * {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 8px 12px;
    align-items: start;
  }
  body[data-service-shell="compact-v1"] [data-scroll-rail][data-mobile-only]:has(> .bg-slate-900) > .grid:has(> * > .text-2xl) > * > :first-child {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    margin: 0;
    letter-spacing: .1em;
  }
  body[data-service-shell="compact-v1"] [data-scroll-rail][data-mobile-only]:has(> .bg-slate-900) > .grid:has(> * > .text-2xl) > * > .text-2xl {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 20px;
    line-height: 1.3;
  }
  body[data-service-shell="compact-v1"] [data-scroll-rail][data-mobile-only]:has(> .bg-slate-900) > .grid:has(> * > .text-2xl) > * > p:last-child {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
  }
}