/* Softphia UI system v5 (2026-11-07): the one source of truth for buttons, elevation, accordions, chips,
   the segmented toggle and form fields. Tokens (colours, elevation, focus) live in tokens.css; this file
   only uses them. Loaded after every site stylesheet; page stylesheets add layout, never looks.

   Buttons    primary (solid cyan #04bed7, dark ink text; a 1 px darker edge on the light page) / secondary (white,
              1 px neutral border) / tertiary (.text-link);
              sizes sm 36, md 44, lg 48, header 40; radius 8 / 10 / 12; icon 8 px from the label.
              States: hover darkens and lifts the shadow one step, active presses 1 px, focus is a 2 px ring
              2 px off the edge, disabled is grey and flat. No gradients, bevels, ledges or glows.
   Elevation  --elev-xs / sm / md / lg: soft, layered, neutral. Cards sm -> md on hover, tiles md -> lg,
              header on scroll sm, menus and floating panels lg.
   Accordion  .accordion: one bordered list (radius 16), rows split by 1 px lines, a plus in a 30 px circle
              that turns into a minus; the answer opens with a height animation (app.js; instant with
              reduced motion or without JavaScript).
   Switch     .switch: a checkbox with role="switch", 44 x 26, the knob drawn by its background; on is cyan.
   Consent    .consent: the cookie banner, a card bottom-left (a bar on a phone), two equal buttons. */

/* ---------- focus: one ring everywhere ---------- */
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---------- buttons ---------- */
.button, .btn, .site-cta, .site-login, .pricing-picker__submit, .platform-engine-toggle, .trade-tile__open,
.hero-actions > .text-link, .onb-button, .onb-hero__cta, .onb-form .onb-submit, .onb-describe button, .softsi-bubble__actions button {
    --_h: 44px; --_px: 18px; --_fs: 15px; --_r: 10px; --_icon: 18px;
    --_bg: var(--primary); --_bg-hover: var(--primary-hover); --_bg-active: var(--primary-active);
    --_fg: var(--on-primary); --_bd: var(--primary-border, transparent); --_bd-hover: var(--primary-border, transparent);
    --_sh: var(--elev-xs); --_sh-hover: var(--elev-sm);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    box-sizing: border-box; min-height: var(--_h); margin: 0; padding: 6px var(--_px);
    border: 1px solid var(--_bd); border-radius: var(--_r);
    background: var(--_bg); color: var(--_fg);
    font-family: inherit; font-size: var(--_fs); font-weight: 600; line-height: 1.25; letter-spacing: -.005em; text-align: center;
    text-decoration: none; text-shadow: none; white-space: nowrap; cursor: pointer; vertical-align: middle;
    -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
    box-shadow: var(--_sh); filter: none;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease, transform .1s ease;
}
:is(.button, .btn, .site-cta, .site-login, .pricing-picker__submit, .platform-engine-toggle, .hero-actions > .text-link, .onb-button, .onb-hero__cta, .onb-form .onb-submit, .onb-describe button, .softsi-bubble__actions button):hover {
    background: var(--_bg-hover); border-color: var(--_bd-hover); color: var(--_fg); box-shadow: var(--_sh-hover); text-decoration: none;
}
:is(.button, .btn, .site-cta, .site-login, .pricing-picker__submit, .platform-engine-toggle, .hero-actions > .text-link, .onb-button, .onb-hero__cta, .onb-form .onb-submit, .onb-describe button, .softsi-bubble__actions button):active {
    background: var(--_bg-active); transform: translateY(1px); box-shadow: var(--_sh);
}
:is(.button, .btn, .site-cta, .site-login, .pricing-picker__submit, .platform-engine-toggle, .hero-actions > .text-link, .onb-button, .onb-hero__cta, .onb-form .onb-submit, .onb-describe button, .softsi-bubble__actions button):focus-visible {
    outline: 2px solid var(--focus-ring); outline-offset: 2px;
}
:is(.button, .btn, .pricing-picker__submit, .onb-button, .onb-form .onb-submit, .onb-describe button):is(:disabled, [aria-disabled="true"]) {
    background: var(--disabled-bg); border-color: transparent; color: var(--disabled-fg); box-shadow: none; transform: none; cursor: not-allowed;
}
:is(.button, .btn, .site-cta, .site-login, .pricing-picker__submit, .platform-engine-toggle, .trade-tile__open, .hero-actions > .text-link, .onb-button, .onb-hero__cta) .icon {
    width: var(--_icon); height: var(--_icon); flex: none; transition: transform .2s ease;
}
/* a trailing arrow moves with the pointer */
:is(.button, .btn, .site-cta, .hero-actions > .text-link, .onb-button):hover .icon:last-child:not(:first-child) { transform: translateX(2px); }

/* secondary: the page's surface, a neutral hairline, ink */
.button.button-outline, .button-outline, .btn-ghost, .btn-outline, .site-login, .platform-engine-toggle, .hero-actions > .text-link, .onb-button--ghost {
    --_bg: var(--secondary-bg); --_bg-hover: var(--secondary-bg-hover); --_bg-active: var(--secondary-bg-hover);
    --_fg: var(--secondary-fg); --_bd: var(--secondary-border); --_bd-hover: var(--secondary-border-hover);
    --_sh: var(--elev-xs); --_sh-hover: var(--elev-xs);
}

/* sizes */
.button-sm, .platform-engine-toggle { --_h: 36px; --_px: 14px; --_fs: 14px; --_r: 8px; --_icon: 16px; }
.site-cta, .site-login { --_h: 40px; --_px: 16px; --_fs: 14.5px; --_r: 10px; --_icon: 16px; }
.button-lg, .hero-actions > .button, .hero-actions > .text-link, .industry-plan__actions > .button, .onb-hero__cta { --_h: 48px; --_px: 22px; --_fs: 16px; --_r: 12px; --_icon: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
@media (max-width: 480px) {
    .hero-actions > .button, .hero-actions > .text-link { width: 100%; }
}

/* tertiary: a link with an arrow ("Details ->") */
.text-link {
    display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; box-shadow: none;
    color: var(--accent-text); font-size: 15px; font-weight: 600; line-height: 1.4; text-decoration: none;
    transition: color .15s ease;
}
.text-link .icon { width: 16px; height: 16px; flex: none; transition: transform .2s ease; }
.text-link:hover { color: var(--ink); text-decoration: none; }
.text-link:hover .icon:last-child { transform: translateX(3px); }
.text-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; border-radius: 6px; }

/* dark bands keep the dark theme's buttons in both themes */
.platform-final, .softedge-banner-inner, .service-cta, .trade-tile {
    --primary: #04bed7; --primary-hover: #03aec5; --primary-active: #03a6bc; --on-primary: #0a1117; --primary-border: transparent;
    --secondary-bg: rgba(255, 255, 255, .06); --secondary-bg-hover: rgba(255, 255, 255, .12);
    --secondary-border: rgba(255, 255, 255, .20); --secondary-border-hover: rgba(255, 255, 255, .34); --secondary-fg: var(--se-text);
    --elev-xs: 0 1px 2px rgb(0 0 0 / .4); --elev-sm: 0 1px 2px rgb(0 0 0 / .4), 0 4px 12px -2px rgb(0 0 0 / .45);
    --focus-ring: var(--se-cyan);
}
:is(.platform-final, .softedge-banner-inner, .service-cta) .text-link:not(.hero-actions > .text-link) { color: var(--se-cyan-soft); }
:is(.platform-final, .softedge-banner-inner, .service-cta) .text-link:not(.hero-actions > .text-link):hover { color: #ffffff; }

/* ---------- surfaces on the elevation scale ---------- */
.product-card, .benefit-card, .app-card, .v4-pricing, .industry-related a, .industry-group, .industry-included .sector-module,
.industry-compare__card, .pricing-card, .downloads-card, .platform-app-links a {
    box-shadow: var(--elev-sm);
}
.product-card:hover, .product-card:focus-visible, .app-card:hover, .app-card:focus-visible, .industry-related a:hover, .industry-group:hover,
.industry-included .sector-module:hover, .platform-app-links a:hover {
    box-shadow: var(--elev-md); border-color: var(--line-strong);
}

/* ---------- accordion ---------- */
.accordion {
    box-sizing: border-box; width: 100%; max-width: 760px; margin-inline: auto;
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--elev-xs); overflow: hidden;
}
.accordion > details { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.accordion > details:not([hidden]) ~ details { border-top: 1px solid var(--line); }
.accordion > details > summary, .disclosure > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    min-height: 0; margin: 0; padding: 19px 20px 19px 24px; list-style: none; cursor: pointer;
    font-size: 17px; font-weight: 600; line-height: 1.4; letter-spacing: -.005em; color: var(--ink); text-align: left;
    transition: background-color .15s ease;
}
.accordion > details > summary::-webkit-details-marker, .disclosure > summary::-webkit-details-marker { display: none; }
.accordion > details > summary::marker, .disclosure > summary::marker { content: ''; }
.accordion > details > summary:hover, .disclosure > summary:hover { background: var(--row-hover); }
.accordion > details > summary:focus-visible, .disclosure > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; border-radius: 12px; }
.accordion > details > summary > span:first-child { min-width: 0; }
/* the plus in a neutral circle; open, its vertical bar turns flat: a minus */
.accordion__icon, .pricing-list__icon {
    position: relative; flex: none; display: block; width: 30px; height: 30px; border: 0; border-radius: 50%;
    background: var(--neutral-soft); color: var(--ink); transition: background-color .2s ease, color .2s ease;
}
.accordion__icon::before, .accordion__icon::after, .pricing-list__icon::before, .pricing-list__icon::after {
    content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.75px; margin: 0; border-radius: 1px;
    background: currentColor; transform: translate(-50%, -50%); transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.accordion__icon::after, .pricing-list__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
summary:hover .accordion__icon, summary:hover .pricing-list__icon { background: var(--neutral-strong); }
details[open]:not(.is-closing) > summary .accordion__icon, details[open]:not(.is-closing) > summary .pricing-list__icon { background: var(--ink); color: var(--surface); }
details[open]:not(.is-closing) > summary .accordion__icon::after, details[open]:not(.is-closing) > summary .pricing-list__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
/* the answer */
.accordion > details > :not(summary) {
    box-sizing: border-box; max-width: 68ch; margin: 0; padding: 0 24px 22px;
    font-size: 16px; line-height: 1.6; color: var(--muted);
}
.accordion > details > :not(summary) :is(p, ul, ol) { margin: 0 0 12px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.accordion > details > :not(summary) > :last-child { margin-bottom: 0; }
.accordion > details > :not(summary) :is(ul, ol) { padding-left: 20px; }
.accordion > details > :not(summary) li { margin: 4px 0; }
.accordion > details > :not(summary) h4 { margin: 16px 0 6px; font-size: 16px; font-weight: 650; color: var(--ink); }
.accordion > details > :not(summary) a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.accordion > details > :not(summary) strong { color: var(--ink-2); }
details.is-animating { overflow: hidden; }

/* a single collapsible inside a card ("everything in the package", the price list) */
.disclosure { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--elev-xs); overflow: hidden; }
.disclosure > summary { padding: 12px 12px 12px 16px; font-size: 15px; }
.disclosure > summary .accordion__icon { width: 28px; height: 28px; }
.disclosure > :not(summary) { padding: 0 16px 16px; }

@media (max-width: 760px) {
    .accordion { border-radius: 14px; }
    .accordion > details > summary { padding: 16px 14px 16px 18px; font-size: 16px; gap: 14px; }
    .accordion > details > :not(summary) { padding: 0 18px 18px; font-size: 15.5px; }
    .accordion > details > :not(summary) :is(p, ul, ol) { font-size: 15.5px; }
    .accordion__icon, .pricing-list__icon { width: 28px; height: 28px; }
}

/* ---------- chips: links that filter or jump (pill, hairline, the smallest shadow) ---------- */
.chip, .pricing-chips a, .softsi-faq-topics a, .engine-chips a, .industry-home-groups a, .onb-chip, .trade-pill a, .site-drawer-langs a {
    display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; min-height: 40px; padding: 0 16px;
    border: 1px solid var(--secondary-border); border-radius: 999px; background: var(--secondary-bg); color: var(--ink);
    font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.25; text-decoration: none; box-shadow: var(--elev-xs);
    cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.chip:hover, .pricing-chips a:hover, .softsi-faq-topics a:hover, .engine-chips a:hover, .industry-home-groups a:hover, .onb-chip:hover, .trade-pill a:hover, .site-drawer-langs a:hover {
    background: var(--secondary-bg-hover); border-color: var(--secondary-border-hover); color: var(--ink); text-decoration: none;
}
:is(.chip, .pricing-chips a, .engine-chips a, .onb-chip) .icon { width: 16px; height: 16px; flex: none; color: var(--accent-text); }
/* the chosen one */
.chip.is-active, .chip[aria-current], .pricing-chips a[aria-current="page"], .site-drawer-langs a[aria-current="true"], .onb-chip--primary, .onb-chip--primary:hover {
    background: var(--accent-solid); border-color: var(--accent-solid); color: var(--on-accent-solid); font-weight: 600;
}
:is(.chip.is-active, .chip[aria-current], .pricing-chips a[aria-current="page"], .onb-chip--primary) .icon { color: currentColor; }

/* static tags: what a package holds, the other trades it serves (no shadow, no border, a quiet fill) */
.tag, .industry-also-for li, .industry-plan__capacity li, .industry-value-strip span {
    display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; min-height: 30px; padding: 4px 12px;
    border: 0; border-radius: 999px; background: var(--neutral-soft); box-shadow: none;
    color: var(--ink-2); font-size: 13px; font-weight: 500; line-height: 1.35;
}
:is(.tag, .industry-plan__capacity li) .icon { width: 15px; height: 15px; flex: none; color: var(--accent-text); }

/* ---------- segmented toggle (monthly / yearly) ---------- */
.segmented, .pricing-toggle, .industry-billing, .onb-interval {
    display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; box-sizing: border-box;
    padding: 3px; border: 1px solid var(--line); border-radius: 12px; background: var(--neutral-soft); box-shadow: none;
    justify-self: start; align-self: flex-start;
}
:is(.segmented, .pricing-toggle, .industry-billing, .onb-interval) button {
    min-width: 92px; min-height: 36px; margin: 0; padding: 0 16px; border: 0; border-radius: 9px; background: transparent; box-shadow: none;
    color: var(--muted); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
:is(.segmented, .pricing-toggle, .industry-billing, .onb-interval) button:hover { color: var(--ink); }
:is(.segmented, .pricing-toggle, .industry-billing, .onb-interval) button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--elev-sm); }
:root[data-theme="dark"] :is(.segmented, .pricing-toggle, .industry-billing, .onb-interval) button[aria-pressed="true"] { background: rgba(255, 255, 255, .12); }
:is(.segmented, .pricing-toggle, .industry-billing, .onb-interval) button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }

/* ---------- form fields ---------- */
:where(input:not([type]), input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"], input[type="password"], input[type="number"], select, textarea) {
    box-sizing: border-box; min-height: 44px; padding: 10px 14px;
    border: 1px solid var(--control-border); border-radius: 10px; background-color: var(--control-bg); color: var(--ink);
    font-family: inherit; font-size: 16px; line-height: 1.4; box-shadow: var(--elev-xs);
    transition: border-color .15s ease, box-shadow .15s ease;
}
:where(input:not([type]), input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"], input[type="password"], input[type="number"], select, textarea):hover { border-color: var(--control-border-hover); }
:where(input:not([type]), input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"], input[type="password"], input[type="number"], select, textarea):focus {
    border-color: var(--focus-ring); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 22%, transparent);
}
:where(input, textarea)::placeholder { color: var(--faint); opacity: 1; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .button, .btn, .site-cta, .site-login, .text-link, .text-link .icon, .button .icon, .accordion__icon, .accordion__icon::before, .accordion__icon::after,
    .pricing-list__icon::before, .pricing-list__icon::after, .chip, .pricing-chips a, .engine-chips a, .onb-chip { transition: none; }
    :is(.button, .btn, .site-cta, .site-login, .onb-button):active { transform: none; }
}

/* ---------- switch: an on/off choice (a checkbox with role="switch"); the knob is drawn by the background ---------- */
.switch {
    -webkit-appearance: none; appearance: none; flex: none; box-sizing: border-box; width: 44px; height: 26px; margin: 0;
    border: 1px solid var(--control-border); border-radius: 999px; cursor: pointer;
    background: radial-gradient(circle 8px at 12px 50%, var(--muted) 0 7.5px, transparent 8px) no-repeat, var(--neutral-strong);
    transition: background-color .15s ease, border-color .15s ease;
}
.switch:hover { border-color: var(--control-border-hover); }
.switch:checked {
    border-color: var(--primary-border, transparent);
    background: radial-gradient(circle 9px at calc(100% - 12px) 50%, var(--on-primary) 0 8.5px, transparent 9px) no-repeat, var(--primary);
}
.switch:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---------- cookie consent (partials/consent, assets/js/consent.js) ----------
   A small card bottom-left on a larger screen, a bar along the bottom on a phone. Shown while <html> has
   .consent-open (set before paint); --consent-h is the room it takes, measured before the page is laid out, so
   the page keeps that room at its foot, the /start conversation ends above it and, on a phone, SoftSI's launcher
   and bubble move up by it (translate: no layout shift). Reject and Accept are the same size and style. */
.consent { display: none; }
html.consent-open .consent {
    display: block; position: fixed; z-index: 1000; left: 24px; bottom: 24px;
    width: min(400px, max(320px, calc(100vw - 440px))); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
    box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain;
    padding: 18px 20px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--elev-lg);
    color: var(--ink); font-size: 14px; line-height: 1.5; animation: consent-in .2s ease both;
}
@keyframes consent-in { from { opacity: 0; } to { opacity: 1; } }
/* (.consent .consent__title: above the site's own heading sizes, .service h2 / .service-theme h2) */
.consent .consent__title { max-width: none; margin: 0 0 4px; background: none; color: var(--ink); -webkit-text-fill-color: currentColor; font-family: inherit; font-size: 15px; font-weight: 650; line-height: 1.35; letter-spacing: -.005em; text-transform: none; }
.consent .consent__text { max-width: none; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; letter-spacing: 0; }
.consent__text a { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.consent__text a:hover { color: var(--ink); }
.consent__prefs { display: grid; gap: 8px; margin: 14px 0 0; }
.consent__prefs[hidden] { display: none; }
.consent__pref { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.consent__pref label { display: grid; gap: 2px; min-width: 0; cursor: pointer; }
.consent__pref strong { color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.35; }
.consent__pref label span { color: var(--muted); font-size: 13px; line-height: 1.4; }
.consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.consent__actions .button { --_h: 40px; --_px: 14px; --_fs: 14px; --_r: 10px; flex: 1 1 0; min-width: 92px; }
.consent__actions .consent__save { order: -1; flex-basis: 100%; }
.consent__actions .consent__save[hidden] { display: none; }
.consent__settings {
    flex: none; margin: 0 auto 0 0; min-height: 40px; padding: 0 4px; border: 0; border-radius: 6px; background: none; box-shadow: none;
    color: var(--accent-text); font-family: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.consent__settings:hover { color: var(--ink); }
.consent-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html.consent-open body { padding-bottom: var(--consent-h, 0px); }
html.consent-open .onb-panel--page { height: calc(var(--onb-view-h, 100svh) - var(--onb-site-header-h, var(--onb-header-h, 76px)) - var(--consent-h, 0px)); }
main[tabindex="-1"]:focus { outline: none; }
/* the footer's "Cookie settings" reopens it */
.footer-consent {
    display: inline-flex; align-items: center; min-height: 32px; margin: 0 0 0 14px; padding: 0; border: 0; background: none;
    color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.footer-consent:hover { color: var(--ink); }
@media (max-width: 760px) {
    html.consent-open .consent {
        left: 0; right: 0; bottom: 0; width: auto; max-height: 75vh; max-height: 75dvh;
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); border-width: 1px 0 0; border-radius: 16px 16px 0 0;
    }
    .consent .consent__title { font-size: 14.5px; }
    .consent .consent__text { font-size: 13.5px; }
    .consent__actions .button { --_h: 44px; }
    .consent__settings { min-height: 44px; }
    html.consent-open :is(.softsi-launcher, .softsi-bubble, .softsi-advisor:not(.is-open)) { translate: 0 calc(-1 * var(--consent-h, 0px)); }
    .footer-consent { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    html.consent-open .consent { animation: none; }
    .switch { transition: none; }
}
@media print { html.consent-open .consent { display: none; } html.consent-open body { padding-bottom: 0; } }