/* Brand layer: the surfaces of both themes, accessible links, icons and the metallic accents.
   Everything here uses tokens.css; buttons, chips, accordions, fields, elevation and focus are ui.css. */

.testimonial-avatar, .onb-avatar { color: var(--on-accent) !important; }
.platform-people-strip a { color: var(--on-dark) !important; background: var(--dark) !important; }

/* ---- links, eyebrows, numbers: dark ink / accessible cyan ---- */
a { color: var(--accent-text); }
.eyebrow, .platform-number, .pp-eyebrow { color: var(--accent-text) !important; }

/* ---- surfaces ---- */
body.service, body.service-theme, .platform-page, .page-hero, .section { background-color: var(--bg); color: var(--ink-2); }
h1, h2, h3, h4, h5, h6, .platform-page h1, .platform-page h2, .platform-page h3, .platform-home-copy h1, .platform-intro h1, .industry-hero h1, .page-hero h1, .section-title, .pp-title { color: var(--ink) !important; }
.platform-final h2, .softedge-banner-inner h2, .industry-process-art strong, .sector-all-art span, .site-drawer-panel h2 { color: var(--on-dark) !important; }
.platform-page p, .platform-lead, .section-lead, .plan-desc { color: var(--ink-2); }
.market-footer { background: var(--surface) !important; border-top: 1px solid var(--line) !important; color: var(--ink-2); }
.market-footer a, .market-footer strong, .market-footer address { color: var(--ink-2); }
.market-footer-brand p, .market-footer-bottom { color: var(--muted) !important; }
.product-card, .product-group, .product-not, .product-facts dl, .pp-card, .plan-card, .addon-card, .downloads-card, .industry-plan, .sector-module, .industry-related a, .home-free-strip article, .platform-app-links a, .store-badge.is-pending {
    background: var(--surface) !important;
    border-color: var(--line) !important;
    color: var(--ink-2);
}
.product-need { background: var(--accent-tint) !important; border-color: transparent !important; }
.product-wordmark, .product-card-visual, .product-logo-tile { background: var(--logo-tile) !important; }
:root[data-theme="dark"] .product-card-visual, :root[data-theme="dark"] .product-logo-tile { border-color: rgba(255, 255, 255, .14) !important; }
.store-badge { background: var(--dark) !important; color: var(--on-dark) !important; }
.store-badge:hover { border-color: rgba(255, 255, 255, .28) !important; }
:root[data-theme="dark"] .store-badge { background: var(--surface-3) !important; }
.platform-final, .softedge-banner-inner, .service-cta-dark { background-color: var(--dark); color: var(--on-dark); }
.platform-final h2, .platform-final p, .softedge-banner-inner h2 { color: var(--on-dark) !important; }
.softedge-banner-inner p { color: var(--on-dark-dim) !important; }
.platform-final { background: radial-gradient(900px 400px at 85% 0%, rgba(var(--se-cyan-rgb), .18), transparent 60%), var(--dark); }
.industry-process-art, .sector-all-art { color: var(--on-dark); }

/* device frames around screenshots suit both themes */
.device-body { background: var(--frame) !important; }
.product-capture figcaption { color: var(--muted) !important; }

/* details: no browser marker (the accordion component draws its own) */
details > summary { color: var(--ink); cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }

/* icons */
.icon { display: inline-block; vertical-align: -.2em; flex: none; }
.icon-tile { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-tint); color: var(--accent-text); flex: none; }
:root[data-theme="dark"] .icon-tile { color: var(--se-cyan); }
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.check-list li { display: flex; align-items: flex-start; gap: .6rem; line-height: 1.5; }
.check-list li .icon { margin-top: .15rem; color: var(--accent-text); }
.check-list li.is-not .icon { color: var(--muted); }
.product-group li::before, .product-need li::before, .product-not li::before { display: none; }
.product-group li, .product-need li, .product-not li { padding-left: 0; display: flex; gap: .6rem; }
.product-group li .icon, .product-need li .icon, .product-not li .icon { margin-top: .2rem; color: var(--accent-text); }
.product-not li .icon { color: var(--muted); }
.product-card-copy b, .industry-related b { display: none; }
.product-card-copy .icon-arrow, .industry-related .icon-arrow { position: absolute; right: 0; top: .1rem; color: var(--accent-text); }

/* footer contact lines and sector card arrows */
.footer-contact { font-style: normal; display: grid; gap: .45rem; margin-top: 14px; font-size: .9rem; }
.footer-contact > * { display: flex; align-items: flex-start; gap: .5rem; color: var(--ink-2); text-decoration: none; }
.footer-contact .icon { color: var(--accent-text); margin-top: .1rem; }
.platform-sector-grid > a .icon-arrow { color: var(--accent-text); justify-self: end; }
.downloads-icon { width: 44px; height: 44px; }

/* ---- page width: 1400 px site-wide, responsive side padding, a comfortable measure for prose ---- */
.wrap, .container, .market-footer-inner, .site-header-inner, .section .container, .page-hero .container { width: min(var(--site-width, 1400px), calc(100% - 48px)) !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; }
@media (max-width: 760px) { .wrap, .container, .market-footer-inner, .section .container, .page-hero .container { width: calc(100% - 32px) !important; } }
.platform-lead, .platform-section-heading p, .platform-engine-copy p, .platform-editorial p, .softsi-faq-answer, .platform-faq p, .product-group li, .product-need li, .product-not li, .industry-section-lead, .section-lead { max-width: 70ch; }
.platform-intro.wrap > .platform-home-copy h1, .platform-intro.wrap > h1 { max-width: 22ch; }

/* ---- the metallic, silvery look of the logos, carried into the site (sparingly) ----
   Silver gradient hairlines on cards (a gradient border through background-clip), a brushed
   sheen on icon tiles and the hero tile, a chrome highlight on the hero heading. Both themes. */
:root {
    --metal-edge: linear-gradient(135deg, rgba(255,255,255,.95), rgba(170,186,194,.9) 35%, rgba(255,255,255,.98) 50%, rgba(150,168,178,.9) 70%, rgba(255,255,255,.95));
    --metal-sheen: linear-gradient(160deg, #ffffff 0%, #eef3f6 38%, #d4dde2 52%, #f6f9fb 68%, #e3e9ed 100%);
    /* The heading's chrome runs top to bottom within each line (background-size: 100% 1lh), so a word
       never changes colour half-way along (QA R1-23); every stop keeps the text at full contrast. */
    --metal-text: linear-gradient(180deg, #3a4c57 0%, #0a1117 42%, #0a1117 58%, #24343d 76%, #0a1117 100%);
}
:root[data-theme="dark"] {
    --metal-edge: linear-gradient(135deg, rgba(232,241,244,.30), rgba(154,174,184,.12) 35%, rgba(232,241,244,.38) 50%, rgba(93,110,120,.14) 70%, rgba(232,241,244,.26));
    --metal-sheen: linear-gradient(160deg, #1a252d 0%, #0f181f 40%, #223039 52%, #0d151b 70%, #1a252d 100%);
    --metal-text: linear-gradient(180deg, #ffffff 0%, #eef4f7 42%, #eef4f7 58%, #c4d3da 76%, #f4f8fa 100%);
}
.product-card, .product-group, .pp-card, .plan-card, .addon-card, .downloads-card, .home-free-strip article, .platform-app-links a, .industry-plan, .site-panel, .product-facts dl {
    border: 1px solid transparent !important;
    background-image: linear-gradient(var(--surface), var(--surface)), var(--metal-edge) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
}
.icon-tile { background: var(--metal-sheen) !important; color: var(--accent-text) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(10,17,23,.08), 0 1px 2px rgba(10,17,23,.06); }
:root[data-theme="dark"] .icon-tile { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.4); }
.product-card-visual { box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), var(--elev-xs); }
.product-logo-tile { box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), var(--elev-md); }
.platform-home-copy h1, .platform-intro h1 { background: var(--metal-text); background-size: 100% 1lh; background-repeat: repeat-y; -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; }
@supports not (background-clip: text) { .platform-home-copy h1, .platform-intro h1 { color: var(--ink) !important; } }
.metal-rule { height: 1px; border: 0; background: var(--metal-edge); opacity: .8; }

/* dark theme: photos slightly dimmed to sit on space */
:root[data-theme="dark"] .business-photo, :root[data-theme="dark"] .platform-people-strip img, :root[data-theme="dark"] .industry-photo { filter: brightness(.92); }
:root[data-theme="dark"] .market-footer { background: var(--se-space) !important; }

/* store badges (app stores): a dark tile with a kicker line; not part of the button system */
.store-badge { display: inline-grid; grid-template-columns: auto auto; justify-content: start; align-content: center; align-items: center; column-gap: 8px; row-gap: 2px; box-sizing: border-box; min-height: 60px; padding: 10px 18px; border-radius: 14px; border: 1px solid transparent; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; box-shadow: var(--elev-xs); transition: background-color .15s ease, border-color .15s ease; }
.store-badge .store-badge-kicker { grid-column: 1 / -1; }
.store-badge .icon { width: 18px; height: 18px; }

/* the FAQ search form is revealed by JavaScript: reserve its box so the page does not shift */
.softsi-faq-search[hidden] { display: block !important; visibility: hidden; min-height: 92px; }
@media (max-width: 760px) { .softsi-faq-search[hidden] { min-height: 118px; } }

.softsi-faq-search.is-pending { visibility: hidden; }

/* the closing band of the sector index and older templates: the dark SoftEdge band, like the site's final CTA */
.service-cta { background: radial-gradient(900px 400px at 85% 0%, rgba(var(--se-cyan-rgb), .18), transparent 60%), var(--dark) !important; color: var(--on-dark) !important; text-align: center; }
.service-cta h2 { color: var(--on-dark) !important; font-size: clamp(28px, 4vw, 44px); line-height: 1.15; }
.service-cta p { color: var(--on-dark-dim) !important; max-width: 60ch; margin-inline: auto; }
.service-cta .eyebrow { color: var(--se-cyan) !important; }
/* FAQ topics: chips that look tappable */
.softsi-faq-topics { display: flex; flex-wrap: wrap; gap: 8px; }