/* The public studio pages share the pricing page's surface and action hierarchy. */
.st.st-technology--inner #st-main {
  --st-line: var(--st-navy-line);
  --st-line-strong: var(--st-navy-line-strong);
  --st-muted: var(--st-on-dark-muted);
  --st-teal: var(--st-sand);
  --st-teal-dark: var(--st-sand);
  --st-grey: var(--st-navy-deep);
  --st-white: var(--st-navy);
  background: var(--st-navy-deep);
  color: var(--st-cream);
}

.st.st-technology--inner #st-main .st-eyebrow { color: var(--st-on-dark-soft); }
.st.st-technology--inner #st-main :focus-visible { outline-color: var(--st-coral); }
.st.st-technology--inner #st-main .st-pricing-anchor:focus-visible { outline: none; }
.st.st-technology--inner #st-main .st-text-link { color: var(--st-sand); }
.st.st-technology--inner #st-main .st-button { border-radius: 7px; }
.st.st-technology--inner #st-main :is(.st-solution-intro .st-button, .st-next-step .st-button, .st-lead-form > .st-button, .st-restaurant-details .st-actions > .st-button:first-child):not(.st-button--outline) {
  background: var(--st-coral);
  border-color: var(--st-coral);
  color: var(--st-ink);
  font-weight: 600;
}
.st.st-technology--inner #st-main :is(.st-solution-intro .st-button, .st-next-step .st-button, .st-lead-form > .st-button, .st-restaurant-details .st-actions > .st-button:first-child):not(.st-button--outline):hover {
  background: var(--st-coral-hover);
  border-color: var(--st-coral-hover);
}
.st.st-technology--inner #st-main .st-button--outline {
  background: transparent;
  border-color: var(--st-navy-line-strong);
  color: var(--st-cream);
}
.st.st-technology--inner #st-main .st-button--outline:hover { background: var(--st-navy-raised); }
.st.st-technology--inner #st-main .st-next-step { background: var(--st-navy); border-radius: 14px; }

/* Solutions, sectors and restaurant product details. */
.st.st-technology--inner .st-solution-intro {
  border-bottom: 1px solid var(--st-navy-line);
  background-image: linear-gradient(90deg, #101d33 20%, #101d33eb 58%, #101d3373), url('/images/technology/engineered-systems.webp');
}
.st.st-technology--inner .st-solution-intro-mark { border-radius: 12px; }
.st.st-technology--inner .st-capabilities h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 400; letter-spacing: -.035em; }
.st.st-technology--inner .st-capabilities article,
.st.st-technology--inner .st-solution-examples {
  background: var(--st-navy);
  border: 1px solid var(--st-navy-line);
  border-radius: 12px;
}
.st.st-technology--inner .st-capabilities article > svg,
.st.st-technology--inner .st-solution-examples a { color: var(--st-sand); }
.st.st-technology--inner .st-solution-examples a { min-height: 44px; }
.st.st-technology--inner .st-status { background: var(--st-navy-raised); border: 1px solid var(--st-navy-line-strong); color: var(--st-on-dark-muted); }
.st.st-technology--inner .st-status--live { color: #b5ded2; }
.st.st-technology--inner .st-status--example { color: var(--st-sand); }

.st.st-technology--inner .st-detail-tabs { gap: 8px; margin-bottom: 24px; }
.st.st-technology--inner .st-detail-tabs button {
  min-height: 44px;
  padding: 9px 16px;
  border-color: var(--st-navy-line-strong);
  background: var(--st-navy);
  color: var(--st-on-dark-muted);
}
.st.st-technology--inner .st-detail-tabs button:hover { background: var(--st-navy-raised); color: var(--st-cream); }
.st.st-technology--inner .st-detail-tabs button[aria-pressed="true"] { background: var(--st-coral); border-color: var(--st-coral); color: var(--st-ink); }
.st.st-technology--inner .st-restaurant-details :is(.st-sync, .st-screens, .st-included, .st-panel, .st-kunye) {
  padding-inline: clamp(16px, 3vw, 34px);
  background: var(--st-navy);
  border: 1px solid var(--st-navy-line);
  border-radius: 12px;
}
.st.st-technology--inner .st-sync-panel,
.st.st-technology--inner .st-screen-images { background: var(--st-navy-raised); border-color: var(--st-navy-line-strong); }
.st.st-technology--inner .st-sync-publish { border-radius: 5px; color: var(--st-on-dark); }
.st.st-technology--inner .st-included-mark { background: var(--st-navy-raised); border-radius: 7px; }
.st.st-technology--inner .st-screen-links a:hover { color: var(--st-cream); }
.st.st-technology--inner .st-kunye-links a { text-decoration-color: var(--st-sand); }

/* Examples use the same card frame while keeping the preview media true to each project. */
.st.st-technology--inner .st-example-ai { border-bottom: 1px solid var(--st-navy-line); }
.st.st-technology--inner .st-example-categories { background: var(--st-navy-deep); }
.st.st-technology--inner .st-example-categories a { background: var(--st-navy); border-color: var(--st-navy-line); color: var(--st-on-dark); }
.st.st-technology--inner .st-example-categories a:hover { background: var(--st-navy-raised); border-color: var(--st-navy-line-strong); color: var(--st-cream); }
.st.st-technology--inner .st-example-categories a[aria-current] { background: var(--st-coral); border-color: var(--st-coral); color: var(--st-ink); }
.st.st-technology--inner .st-example-card { background: var(--st-navy); border-color: var(--st-navy-line); border-radius: 12px; }
.st.st-technology--inner .st-example-card:has(a:hover),
.st.st-technology--inner .st-example-card:focus-within { border-color: var(--st-navy-line-strong); }
.st.st-technology--inner .st-example-image { background: var(--st-navy-raised); }
.st.st-technology--inner .st-example-copy h3 a { color: var(--st-cream); }

/* Bespoke AI keeps its diagrams and uses the studio's active states. */
.st.st-technology--inner .cai { --cai-muted: var(--st-on-dark-muted); }
.st.st-technology--inner .cai :is(.cai-services, .cai-examples, .cai-process, .cai-faq, .tech-packages) { background: var(--st-navy-deep); }
.st.st-technology--inner .cai :is(.cai-service-grid > article, .cai-explorer, .cai-step-detail, .cai-principles, .tech-package-grid > article) {
  background: var(--st-navy);
  border: 1px solid var(--st-navy-line);
  border-radius: 12px;
}
.st.st-technology--inner .cai .cai-service-grid > article { padding: clamp(22px, 3vw, 28px); }
.st.st-technology--inner .cai :is(.cai-deliverable, .cai-text-link, .tech-package-grid a, .tech-package-grid article > svg) { color: var(--st-sand); }
.st.st-technology--inner .cai .cai-scenario-picker button { background: var(--st-navy); border-color: var(--st-navy-line-strong); color: var(--st-on-dark); }
.st.st-technology--inner .cai .cai-scenario-picker button:hover { background: var(--st-navy-raised); }
.st.st-technology--inner .cai .cai-scenario-picker button[aria-pressed="true"] { background: var(--st-coral); border-color: var(--st-coral); color: var(--st-ink); }
.st.st-technology--inner .cai .cai-workflow { background: var(--st-ink); }
.st.st-technology--inner .cai .cai-workflow-steps li:not(:last-child)::after { background: var(--st-navy-line-strong); }
.st.st-technology--inner .cai .cai-node { background: var(--st-navy); color: var(--st-on-dark); box-shadow: none; }
.st.st-technology--inner .cai .cai-node-number { background: var(--st-navy-raised); color: var(--st-on-dark); }
.st.st-technology--inner .cai .cai-workflow-steps button[aria-pressed="true"] .cai-node { background: var(--st-navy-raised); border-color: var(--st-navy-line-strong); box-shadow: none; }
.st.st-technology--inner .cai .cai-workflow-steps button[aria-pressed="true"] .cai-node-number { background: var(--st-coral); color: var(--st-ink); }
.st.st-technology--inner .cai .cai-connector { background: var(--st-ink); color: var(--st-on-dark-soft); }
.st.st-technology--inner .cai :is(.cai-process-index, .cai-step-detail > span, .cai-system-list svg) { color: var(--st-sand); }
.st.st-technology--inner .cai .cai-system-list--out > span { color: var(--st-on-dark-muted); }

/* Contact and About. Keep field text readable in native controls. */
.st.st-technology--inner #st-main .st-contact { background: var(--st-ink); }
.st.st-technology--inner .st-lead-form :is(input, select, textarea) {
  background-color: var(--st-ink);
  border-color: var(--st-navy-line-strong);
  color: var(--st-cream);
  color-scheme: dark;
}
.st.st-technology--inner .st-lead-form :is(input, textarea)::placeholder { color: var(--st-on-dark-soft); }
.st.st-technology--inner .st-lead-form :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--st-coral); }
.st.st-technology--inner #st-main .st-contact + #sss { background: var(--st-navy-deep); }
.st.st-technology--inner .st-faq summary::after { color: var(--st-sand); }
.st.st-technology--inner .st-faq details[open] summary::after { color: var(--st-coral); }
.st.st-technology--inner .st-page:not(.legal-document-page, .legal-center-page) .st-page-section {
  background: var(--st-navy);
  border: 1px solid var(--st-navy-line);
  border-radius: 12px;
}
.st.st-technology--inner .st-security-card { background: var(--st-ink); border-color: var(--st-navy-line); border-radius: 10px; }
.st.st-technology--inner .st-security-badge { background: var(--st-navy-raised); color: var(--st-sand); }

/* Keep coral concentrated on actions and small selection indicators. */
.st.st-technology .st-pricing .st-pricing-cards > .st-tier:not(.st-tier--featured) .st-button {
  background: transparent;
  border-color: var(--st-navy-line-strong);
  color: var(--st-cream);
}
.st.st-technology .st-pricing .st-pricing-cards > .st-tier:not(.st-tier--featured) .st-button:hover { background: var(--st-navy-raised); }
.st.st-technology .st-pricing .st-pricing-cards > .st-tier--featured,
.st.st-technology .st-pricing .nc-offer--ai { border-color: var(--st-navy-line-strong); }
.st.st-technology .st-pricing .st-tier-flag { background: var(--st-navy); border-color: var(--st-navy-line-strong); color: var(--st-sand); }
.st.st-technology .hp .hp-assistant-selector button[aria-pressed="true"] { box-shadow: inset 0 -2px var(--st-coral); }

/* Both the static and React versions of the legal pages use a paper reading surface. */
.legal-static,
.st.st-technology--inner #st-main :is(.legal-center-page, .legal-document-page) {
  --st-ink: #101d33;
  --st-navy: #14213d;
  --st-navy-line: #2c3d5c;
  --st-cream: #f4ede0;
  --st-paper: #fbf8f2;
  --st-grey: #ede4d3;
  --st-line: #ddd2bf;
  --st-muted: #4f5d72;
  --st-teal: #203b60;
  --st-teal-dark: #203b60;
  --st-coral: #ff6b5b;
  background: var(--st-paper);
  color: var(--st-ink);
}
.legal-static.st .st-header.st-site-header { background: var(--st-ink); border-color: var(--st-navy-line); color: var(--st-cream); }
.legal-static.st .st-site-header :is(.cd-brand, .st-site-nav-links > li > a, .st-site-panel, .st-solutions-menu > summary, .st-site-menu-toggle) { color: var(--st-cream); }
.legal-static.st .st-site-header .cd-brand-solutions { color: #75d9ce; }
.legal-static.st .st-site-header .st-site-cta { background: var(--st-coral); color: var(--st-ink); }
.legal-static.st .st-site-header .st-site-cta:hover { background: #ff8577; }
.legal-static.st .st-header.st-site-header :focus-visible { outline-color: var(--st-coral); }
.legal-static.st .st-site-header .st-solutions-dropdown :focus-visible { outline-color: var(--st-teal); }
.legal-static :is(.legal-page-header, .legal-toc),
.st.st-technology--inner #st-main .legal-document-page .legal-toc { border-radius: 12px; }
.legal-static .legal-page-header,
.st.st-technology--inner #st-main .legal-document-page .st-page-head {
  padding: clamp(22px, 4vw, 42px);
  background: var(--st-navy);
  border: 1px solid var(--st-navy-line);
  border-radius: 12px;
  color: var(--st-cream);
}
.legal-static .legal-page-header :is(.lede, .updated),
.st.st-technology--inner #st-main .legal-document-page .st-page-head :is(.st-lede, .st-page-updated) { color: #c0ccdc; }
.legal-static .legal-document-section h2 { text-wrap: balance; }
.legal-static .legal-category-nav a,
.st.st-technology--inner #st-main .legal-category-nav a { border-radius: 5px; }
.legal-static .legal-category-nav a.is-active,
.st.st-technology--inner #st-main .legal-category-nav a.is-active { border-left-color: var(--st-coral); }
.legal-static .legal-document-row:hover,
.st.st-technology--inner #st-main .legal-document-row:hover { background: var(--st-grey); }
.legal-static :is(.legal-page-header, .legal-document-content) { overflow-wrap: anywhere; }

@media (max-width: 599px) {
  .st.st-technology--inner .st-detail-tabs button { flex: 1 1 auto; }
  .st.st-technology--inner .st-solution-examples { padding: 20px; gap: 6px 16px; }
  .st.st-technology--inner .st-solution-examples h3 { flex-basis: 100%; }
}