/* Global appearance. Product identity remains a separate data-theme on main. */
.theme-toggle{flex:none;width:44px;height:44px;display:grid;place-items:center;padding:10px;border:1px solid var(--line);border-radius:50%;background:transparent;color:inherit;cursor:pointer}.theme-toggle[hidden]{display:none}.theme-toggle svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.theme-sun{display:none}html[data-appearance=dark] .theme-sun{display:block}html[data-appearance=dark] .theme-moon{display:none}.site-header{gap:20px}
html[data-appearance]{--surface:#fff;--canvas:#f7f9fc;--tint:#edf2fc;--ink:#14243b;--muted:#53657c;--line:#dbe2ed;--accent:#2349d8;--accent-ink:#fff;--sc-canvas:var(--canvas);--sc-ink:var(--ink)}
html[data-appearance=dark]{--surface:#121c2a;--canvas:#0b1018;--tint:#182437;--ink:#f1f5fc;--muted:#bac8db;--line:#344459;--accent:#b4ceff;--accent-ink:#14243b;--blue:#b4ceff}
html[data-appearance] body{background:var(--canvas);color:var(--ink)}
html[data-appearance] #main{--ink:inherit;color:var(--ink);--muted:inherit;--line:inherit;--blue:var(--accent)}
html[data-appearance] #main[data-theme]{--ink:#14243b;--muted:#53657c;--line:#dbe2ed;background:var(--canvas);color:var(--ink)}
html[data-appearance=dark] #main[data-theme]{--ink:#f1f5fc;--muted:#bac8db;--line:#344459}
html[data-appearance] .site-header,html[data-appearance] .footer,html[data-appearance] .offer-menu>div,html[data-appearance] .cookie-banner,html[data-appearance] dialog{background:var(--surface);color:var(--ink);border-color:var(--line)}
html[data-appearance] #main :is(.product-hero,.process,.staff-process,.staff-cta,.project-example,.service-visual,.pricing-onprem){background:var(--tint);color:var(--ink);border-color:var(--line)}
html[data-appearance] #main :is(.need-section,.need-options button,.review-slide,.role-index,.engagement-models article,.visual-node,.team-core,.team-roles>span,.contact-form,.pricing-card,.saphan-plan,.saphan-comparison){background:var(--surface);color:var(--ink);border-color:var(--line)}
html[data-appearance] #main :is(.testimonials){background:var(--canvas)}
html[data-appearance] #main :is(p,li,dd,figcaption,small){color:var(--muted)}
html[data-appearance] #main :is(h1,h2,h3,strong,summary,label,legend){color:var(--ink)}
html[data-appearance] #main :is(.eyebrow,.offer-label,.section-label,.underlink,.offer-detail,.text-link,.pricing-value strong){color:var(--accent)}
html[data-appearance] #main :is(.primary,.nav-button),html[data-appearance] .nav-button{background:var(--accent);color:var(--accent-ink)}
html[data-appearance] #main .secondary{background:var(--surface);color:var(--ink);border-color:var(--line)}
html[data-appearance] #main .text-button{color:var(--ink)}
html[data-appearance] #main :is(input,select,textarea){background:var(--surface);color:var(--ink);border-color:var(--line)}
html[data-appearance] #main input::placeholder,html[data-appearance] #main textarea::placeholder{color:var(--muted)}
html[data-appearance] #main :is(.need-options button[aria-pressed=true],.visual-agenci-ai .node-1,.team-owner){background:var(--accent);color:var(--accent-ink)}
html[data-appearance] #main :is(.visual-agenci-ai .node-1,.team-owner) :is(p,strong,span,small){color:inherit}
html[data-appearance] #main :is(.round-link,.tech-list li,.offer-symbol,.thanks-mark){background:var(--tint);color:var(--accent)}
html[data-appearance] #main .illustrated-offer{--offer-surface:var(--tint)}
html[data-appearance] #main :is(.offer-outsourcing-it,[data-theme=outsourcing-it]){--accent:#815328;--tint:#f5eee4}
html[data-appearance=dark] #main .offer-outsourcing-it{--accent:#e4ba8f;--tint:#241e19}
html[data-appearance] #main[data-theme=outsourcing-it]{--accent:#815328;--tint:#f5eee4}
html[data-appearance=dark] #main[data-theme=outsourcing-it]{--accent:#e4ba8f;--tint:#241e19}
html[data-appearance] #main .offer-mint-service-desk,html[data-appearance] #main[data-theme=mint-service-desk]{--accent:#176857;--tint:#e8f5ef}
html[data-appearance=dark] #main .offer-mint-service-desk,html[data-appearance=dark] #main[data-theme=mint-service-desk]{--accent:#8ad9c2;--tint:#112923}
html[data-appearance] #main[data-theme=saphan]{--accent:#365c99;--tint:#edf2fb}
html[data-appearance=dark] #main[data-theme=saphan]{--accent:#b4ceff;--tint:#101a29}
html[data-appearance] #main .saphan-band{background:var(--tint);color:var(--ink)}
html[data-appearance] #main .saphan-band :is(.saphan-brand,h2 span){color:var(--accent)}
html[data-appearance] #main .saphan-band .light{background:var(--accent);color:var(--accent-ink)}
html[data-appearance] #main .saphan-comparison :is(th,td,caption){border-color:var(--line);color:var(--muted)}
html[data-appearance] #main .saphan-comparison :is(thead th,th:first-child){background:var(--tint);color:var(--ink)}
html[data-appearance] #main .saphan-table-scroll{border-color:var(--line);scrollbar-color:var(--muted) var(--surface)}
html[data-appearance] #main :is(.saphan-plan .plan-terms,.saphan-plan h3){color:var(--ink)}
html[data-appearance] #main :is(.saphan-plan .plan-audience,.comparison-hint,.pricing-note,.pricing-billing){color:var(--muted)}
html[data-appearance] #main .closing{background:#2349d8;color:#fff}
html[data-appearance=dark] #main .closing{background:#162c70}
html[data-appearance] #main .closing :is(h2,p,.eyebrow){color:#fff}
html[data-appearance] #main .closing .light{background:#fff;color:#14243b}
html[data-appearance] #main :is(.mint-play,.mint-player){background:#163e37;color:#fff}
html[data-appearance] #main .mint-play :is(strong,span){color:#fff}
html[data-appearance] #main .preview-note{background:#fff4d9;color:#624b18}
html[data-appearance] .consent{background:var(--tint);color:var(--ink);border-color:var(--line)}
html[data-appearance] .cookie-settings,html[data-appearance] .close-dialog,html[data-appearance] .menu-toggle{color:var(--ink)}
html[data-appearance] .offer-menu>div a:hover{background:var(--tint)}
html[data-appearance=dark] .reviews-controls button{background:var(--surface);color:var(--ink);border-color:var(--line)}
html[data-appearance=dark] .section-ring::before,html[data-appearance=dark] #main ::after{border-color:#7897c044}
html[data-appearance=light] #main[data-theme=saphan] .section-ring::before{border-color:#365c9935}
html[data-appearance] :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline-color:var(--accent)}
@media(max-width:1000px) and (min-width:761px){.site-header{gap:12px;padding-inline:20px}.site-header nav{gap:16px}.site-header .nav-button{padding-inline:18px}}
@media(max-width:760px){html[data-appearance] .site-header nav{background:var(--surface);color:var(--ink)}.site-header{gap:12px}.theme-toggle{width:40px;height:40px}.site-header .menu-toggle{margin-left:auto}}
html[data-appearance] #main .breadcrumb{color:var(--muted)}
html[data-appearance] #main .product-logo.saphan-brand{color:var(--ink)}
html[data-appearance=dark] .hero-light{background:radial-gradient(ellipse,#24447538,transparent 66%)}
html[data-appearance] #main .saphan-plan .underlink{color:var(--accent)}
html[data-appearance] #main .visual-node svg,html[data-appearance] #main .team-core svg{color:var(--accent)}
html[data-appearance] #main .visual-agenci-ai .node-1 svg{color:var(--accent-ink)}
/* Override legacy product-specific colors with the selected appearance palette. */
html[data-appearance] #main[data-theme] .content-section h2{color:var(--accent)}
html[data-appearance] #main[data-theme] .staff-process :is(h2,h3){color:var(--ink)}
html[data-appearance] #main[data-theme] .staff-process :is(p,span){color:var(--muted)}
html[data-appearance] #main[data-theme] .eyebrow{color:var(--accent)}
html[data-appearance] #main[data-theme] .closing .eyebrow{color:#fff}
html[data-appearance] #main[data-theme] .product-logo.saphan-brand{color:var(--ink)}
html[data-appearance] #main[data-theme] .breadcrumb{color:var(--muted)}
html[data-appearance] #main[data-theme] .primary:hover{background:var(--accent);filter:brightness(.92);color:var(--accent-ink)}
html[data-appearance] #main[data-theme] .section-ring::before{border-color:color-mix(in srgb,var(--accent) 28%,transparent)}
html[data-appearance] #main[data-theme] .staff-steps li::before{color:var(--muted)}

/* Compact appearance switch at the trailing edge of the header. */
.site-header .theme-toggle{width:32px;height:32px;padding:7px}.site-header .theme-toggle svg{width:16px;height:16px}
/* Saphan's homepage section retains its original black and pale-blue identity. */
html[data-appearance] #main .saphan-band{--ink:#f7f9fc;--muted:#bdcde0;--accent:#b4ceff;--accent-ink:#14243b;--line:#29384c;background:#000;color:#f7f9fc}
html[data-appearance] #main .saphan-band .saphan-brand{color:#fff}
html[data-appearance] #main .saphan-band h2{color:#fff}
html[data-appearance] #main .saphan-band h2 span{color:#b4ceff}
html[data-appearance] #main .saphan-band .light{background:#b4ceff;color:#14243b}
html[data-appearance] #main .saphan-band .light:hover{background:#fff}
html[data-appearance] #main .saphan-band::after{border-color:#b4ceff45}
/* Saphan keeps its black/pale-blue product identity in either site appearance. */
html[data-appearance] #main[data-theme="saphan"]{--canvas:#030507;--surface:#0b111b;--tint:#101a29;--ink:#f7f9fc;--muted:#bdcde0;--line:#29384c;--accent:#b4ceff;--accent-ink:#14243b;--blue:#b4ceff;background:var(--canvas);color:var(--ink);color-scheme:dark}
html[data-appearance] #main[data-theme="saphan"] .product-hero{background:#000}
html[data-appearance] #main[data-theme="saphan"] .primary:hover{background:#fff;filter:none;color:#14243b}

/* Indigo text treatment for the AI use-case introduction. */
html[data-appearance] #main .indigo-gradient-heading {
  --heading-gradient: linear-gradient(105deg, #252d83 0%, #3045ce 42%, #6662d8 72%, #343bad 100%);
}
html[data-appearance="dark"] #main .indigo-gradient-heading {
  --heading-gradient: linear-gradient(105deg, #a3acf8 0%, #c2c8ff 42%, #9894ee 72%, #b5bfff 100%);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  html[data-appearance] #main .hero .indigo-gradient-heading,
  html[data-appearance] #main[data-theme="agenci-ai"] .content-section .indigo-gradient-heading {
    background-image: var(--heading-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
@media (forced-colors: active) {
  html[data-appearance] #main .hero .indigo-gradient-heading,
  html[data-appearance] #main[data-theme="agenci-ai"] .content-section .indigo-gradient-heading {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}

/* Restore the original white/blue comparison panel and mask the decorative ring. */
#main[data-theme="outsourcing-it"] .engagement-models{position:relative;z-index:3}
html[data-appearance="light"] #main[data-theme="outsourcing-it"] .engagement-section{--ink:#14243b;--muted:#53657c;--line:#dbe2ed;--accent:#815328}
html[data-appearance="light"] #main[data-theme="outsourcing-it"] .engagement-models article{background:#fff}
html[data-appearance="light"] #main[data-theme="outsourcing-it"] .engagement-models article+article{background:#eef3fc}
html[data-appearance="dark"] #main[data-theme="outsourcing-it"] .engagement-models article+article{background:#182437}
/* Lower only the ring above the outsourcing case study. */
#main[data-theme="outsourcing-it"] .section-ring.ring-left:has(+ .project-example)::before{top:calc(-1 * var(--ring-upper) + 80px)}
@media(max-width:760px){#main[data-theme="outsourcing-it"] .section-ring.ring-left:has(+ .project-example)::before{top:calc(-1 * var(--ring-upper) + 48px)}}
/* Anchor the case-study decoration below its heading, inside the section. */
#main[data-theme="outsourcing-it"] .section-ring.ring-left:has(+ .project-example){display:none}
#main[data-theme="outsourcing-it"] .project-example{overflow:hidden}
#main[data-theme="outsourcing-it"] .project-example-grid>div:first-child{position:relative}
#main[data-theme="outsourcing-it"] .project-example-grid>div:first-child::after{content:"";position:absolute;top:calc(100% + 28px);left:calc(-1 * var(--page-gutter) + var(--ring-right));width:var(--ring-size);height:var(--ring-size);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);border-radius:50%;pointer-events:none}
/* Let the same circle continue into client reviews, behind their content. */
#main[data-theme="outsourcing-it"] .project-example{overflow:visible}
#main[data-theme="outsourcing-it"] .staff-proof{position:relative;z-index:1}
#main[data-theme="outsourcing-it"] .staff-clutch-logo{position:relative}
/* Give gradient-clipped descenders room and lift the homepage title slightly. */
html[data-appearance] #main .hero h1.indigo-gradient-heading{position:relative;top:-8px;padding-bottom:.12em}