/* Shared chrome palette. Load after the scene styles; imagery and layout stay local. */
:root {
  --chrome-blue: #0078d4;
  --chrome-blue-deep: #005aa9;
  --chrome-cyan: #25c9ec;
  --chrome-green: #b8d531;
  --chrome-ice: #8dbaf1;
  --chrome-mint: #c9eee5;
  --chrome-navy: #082a5a;
  --chrome-muted: #385873;
  --chrome-line: #a4bfce;
  --chrome-paper: #edf6fc;
  --chrome-blue-surface: linear-gradient(135deg, #0875c8, #065fac 55%, #004f95);
  --chrome-green-surface: linear-gradient(135deg, #e4f4a2, #b8d531 58%, #a5c82e);
  --chrome-glass: linear-gradient(125deg, #e9f6ffed, #c9eee5e8);
  --chrome-shine: inset 0 1px 0 #ffffff90, inset 0 -1px 0 #082a5a15;
  --chrome-ease: cubic-bezier(.2, .75, .25, 1);
  --navy: var(--chrome-navy);
  --deep: #041b3b;
  --blue: var(--chrome-blue);
  --cyan: var(--chrome-cyan);
  --pale: var(--chrome-paper);
  --mint: var(--chrome-mint);
  --ink: var(--chrome-navy);
  --muted: var(--chrome-muted);
  --line: #8eafc447;
}

::selection { color: var(--chrome-navy); background: var(--chrome-green); }
html { accent-color: var(--chrome-blue-deep); }

/* Blue is the resting action; green marks hover, selection and completion. */
:is(.glass-button, .icon-button, .nav-link, .demo-cta, .dimension-tab,
    .audience-tab, .film-close, .video-start, .panel-nav a) {
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease,
    box-shadow 240ms ease, transform 240ms var(--chrome-ease);
}
:is(button, a, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--chrome-blue-deep);
  outline-offset: 4px;
}
:is(.hero, .film-dialog) :is(button, a):focus-visible {
  outline-color: var(--chrome-green);
  box-shadow: 0 0 0 2px var(--chrome-navy);
}
:is(.glass-button, .icon-button, .nav-link, .demo-cta, .dimension-tab,
    .audience-tab, .film-close, .video-start, .panel-nav a):active {
  transform: translateY(1px) scale(.985);
  box-shadow: inset 0 2px 7px #082a5a26;
}

.glass-button, .icon-button {
  color: var(--chrome-navy);
  border-color: #ffffffb3;
  background: var(--chrome-glass);
  box-shadow: var(--chrome-shine), 0 4px 16px #082a5a12;
}
.glass-button:hover, .icon-button:hover {
  color: var(--chrome-navy);
  background: var(--chrome-green-surface);
  border-color: #d9ed91;
}
.hero-payoff { color: var(--chrome-navy); }
.payoff-english { color: var(--chrome-navy); }
.demo-cta, .hero-payoff .demo-cta {
  color: var(--chrome-navy);
  border-color: #d4e979;
  background: var(--chrome-green-surface);
  box-shadow: var(--chrome-shine), 0 8px 23px #082a5a1a;
}
.demo-cta span, .hero-payoff .demo-cta span { color: var(--chrome-navy); }
.demo-cta:hover, .hero-payoff .demo-cta:hover {
  color: #fff;
  border-color: #82d5ee;
  background: var(--chrome-blue-surface);
  box-shadow: inset 0 1px #b8edff66, 0 10px 25px #005aa932;
}
.demo-cta:hover span, .hero-payoff .demo-cta:hover span { color: var(--chrome-green); }
.nav-link, .nav-link:first-child {
  color: #fff;
  background: linear-gradient(120deg, #075b9eea, #082a5af2);
  border-color: #78bddb9c;
  box-shadow: inset 0 1px #d5f6ff2e, 0 8px 24px #031a3d20;
}
.nav-link::before { background: linear-gradient(110deg, #ffffff3b, transparent 65%); }
.nav-number { color: #b9e5ff; }
.nav-arrow { color: var(--chrome-green); }
.nav-link:hover {
  color: var(--chrome-navy);
  background: var(--chrome-green-surface);
  border-color: #e2ef99;
  box-shadow: inset 0 1px #ffffffe0, 0 9px 24px #031a3d29;
}
.nav-link:hover :is(.nav-number, .nav-arrow) { color: var(--chrome-navy); }
.edge-wave path { stroke: var(--chrome-cyan); }
.edge-dot { fill: var(--chrome-green); filter: drop-shadow(0 0 5px #b8d53166); }

/* Window frames continue the same blue / mint surface behind every chapter. */
.story-dialog {
  color: var(--chrome-navy);
  background: linear-gradient(130deg, #e2effe 0%, #edf6fc 50%, #e0f3e9 100%);
}
.story-dialog::backdrop, .demo-dialog::backdrop {
  background: #041b3bbd;
}
.story-top, .story-bottom {
  background: linear-gradient(115deg, #b7d4f5f5, #d3eee8f5);
  border-color: #739db54d;
  box-shadow: inset 0 1px #ffffff8c;
}
.story-top { position: relative; }
.story-location, .footer-caption { color: var(--chrome-muted); }
.story-scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  overflow: hidden;
  background: #082a5a0d;
  pointer-events: none;
}
.story-scroll-progress > span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(var(--story-progress, 0));
  transform-origin: left;
  background: linear-gradient(90deg, var(--chrome-blue), var(--chrome-cyan) 65%, var(--chrome-green));
  transition: transform 100ms linear;
}
.close-button { color: var(--chrome-navy); }
.close-x {
  color: var(--chrome-navy);
  background: #eaf6ffb3;
  border-color: #799bb5;
  box-shadow: var(--chrome-shine);
  transition: background 180ms ease, transform 180ms ease;
}
.close-button:hover .close-x {
  color: var(--chrome-navy);
  background: var(--chrome-green-surface);
  border-color: #88a828;
  transform: rotate(90deg);
}
.panel-nav a { color: var(--chrome-muted); }
.panel-nav a:hover {
  color: var(--chrome-navy);
  background: #e9f6c5;
  border-color: #b7cd77;
}
.panel-nav a[aria-current="page"] {
  color: var(--chrome-navy);
  background: var(--chrome-green-surface);
  border-color: #9fbd36;
  box-shadow: var(--chrome-shine), 0 4px 12px #082a5a0d;
}
.panel-nav small { opacity: 1; }
.story-scroll, .film-dialog, .demo-calendar {
  scrollbar-width: thin;
  scrollbar-color: var(--chrome-blue) #cce3ed;
}
:is(.story-scroll, .film-dialog, .demo-calendar)::-webkit-scrollbar { width: 10px; height: 10px; }
:is(.story-scroll, .film-dialog, .demo-calendar)::-webkit-scrollbar-track { background: #cce3ed; }
:is(.story-scroll, .film-dialog, .demo-calendar)::-webkit-scrollbar-thumb {
  border: 2px solid #cce3ed;
  border-radius: 10px;
  background: var(--chrome-blue-surface);
}
:is(.story-scroll, .film-dialog, .demo-calendar)::-webkit-scrollbar-thumb:hover { background: var(--chrome-blue-deep); }
.kicker, .section-no, .row-number, .role-tag { color: var(--chrome-blue-deep); }
.text-action, .research-sources, .demo-dialog footer a { color: var(--chrome-blue-deep); }
.text-action { border-color: var(--chrome-blue); }
.text-action:hover, .research-sources a:hover, .demo-dialog footer a:hover {
  color: var(--chrome-navy);
  text-decoration-color: #8fae22;
  border-color: #8fae22;
}
.text-action span { color: var(--chrome-blue); transition: transform 180ms ease; }
.text-action:hover span { transform: translate(2px, -2px); }

/* The problem photograph remains untouched; its overlays use the shared palette. */
.problem-experience {
  --px-navy: var(--chrome-navy);
  --px-deep: var(--deep);
  --px-cyan: var(--chrome-cyan);
  --px-muted: var(--chrome-muted);
}
.problem-experience .problem-signal {
  background: linear-gradient(125deg, #082a5af5, #043e65f5);
  border-color: #91c5e6;
  box-shadow: 0 10px 28px #031a3d40, inset 0 1px #c7eeff33;
}
.problem-experience .problem-signal-number { color: #c8e7ff; border-color: var(--chrome-cyan); }
.problem-experience .problem-signal:nth-child(even) .problem-signal-number { border-color: var(--chrome-green); }
.problem-experience .problem-signal p { color: #d3e5f3; }
.problem-experience .problem-scene-caption { background: #082a5ae8; border-color: #8dbaf1; }
.problem-experience .problem-scene-dot { background: var(--chrome-green); box-shadow: 0 0 0 4px #b8d53126; }
.problem-experience .problem-progress-track { height: 3px; border-radius: 3px; background: #bed6e4; }
.problem-experience .problem-progress-track i { background: linear-gradient(90deg, var(--chrome-blue), var(--chrome-cyan) 65%, var(--chrome-green)); }
.problem-experience .problem-progress-count, .problem-experience .problem-scene-guide > span { color: var(--chrome-blue-deep); }

/* Solution: navy typography, blue devices and green selected controls. */
[data-section="soluzione"] { background: transparent; }
.sj-intro, .sj-intro-copy h2, .sj-intro-copy h2 em { color: var(--chrome-navy); }
.sj-intro-copy .kicker { color: var(--chrome-blue-deep); }
.sj-intro-copy > p:last-child, .sj-intro-scene figcaption { color: var(--chrome-muted); }
.solution-journey {
  --sj-navy: var(--chrome-navy);
  --sj-ink: var(--chrome-navy);
  --sj-muted: var(--chrome-muted);
  --sj-blue: var(--chrome-blue-deep);
  --sj-cyan: var(--chrome-cyan);
  --sj-line: #8eafc447;
}
.solution-journey .sj-nav { background: #e6f2faf5; }
.solution-journey .sj-nav a { color: var(--chrome-muted); border-top-color: #aac6d7; }
.solution-journey .sj-nav a > span { color: var(--chrome-blue-deep); }
.solution-journey .sj-nav a::after { background: linear-gradient(90deg, var(--chrome-blue), var(--chrome-cyan) 60%, var(--chrome-green)); }
.solution-journey .sj-nav a:hover,
.solution-journey .sj-nav a[aria-current="step"] { color: var(--chrome-navy); background: #dcf0cc; }
.solution-journey .sj-nav a[aria-current="step"] > span { color: var(--chrome-navy); }
.solution-journey .sj-stage:nth-of-type(odd) { background: linear-gradient(120deg, #dbeafae8, #e8f5f3e8); }
.solution-journey .sj-stage:nth-of-type(even) { background: #f2f9fc9c; }
.solution-journey .sj-track { background: #a8c4d5; opacity: 1; }
.solution-journey .sj-track > span { background: linear-gradient(var(--chrome-blue), var(--chrome-cyan) 55%, var(--chrome-green)); }
.solution-journey .sj-stage::before { background: #aac6da; border-color: #eaf5fa; }
.solution-journey .sj-stage.is-current::before { background: var(--chrome-blue); box-shadow: 0 0 0 5px #0078d426; }
.solution-journey .sj-stage.is-complete::before { background: #8aab22; }
.solution-journey .sj-eyebrow, .solution-journey .sj-copy > p.sj-emphasis { color: var(--chrome-blue-deep); }
.solution-journey .sj-number { color: var(--chrome-navy); background: #c9dfef; }
.solution-journey .is-current .sj-number { color: var(--chrome-navy); background: var(--chrome-green-surface); box-shadow: var(--chrome-shine); }
.solution-journey .sj-demo-label, .solution-journey .sj-aggregate { color: var(--chrome-navy); background: #dcecc0; }
.solution-journey .sj-app-symbol, .sj-studio-brand > span { color: var(--chrome-blue); }
.solution-journey .sj-app-avatar { color: var(--chrome-navy); background: var(--chrome-green-surface); }
.solution-journey .sj-phone-status, .solution-journey .sj-dashboard-top { background: linear-gradient(110deg, #c7def7, #d5efe7); }
.solution-journey .sj-checkin-progress span:first-child, .sj-studio-progress i:first-child { background: var(--chrome-blue); }
.solution-journey .sj-options label > span {
  color: var(--chrome-navy);
  border-color: #acc8d8;
  background: #f4faff;
}
.solution-journey .sj-options b { color: var(--chrome-muted); }
.solution-journey .sj-options label:hover > span { border-color: var(--chrome-blue); background: #e3f1fb; }
.solution-journey .sj-options input:checked + span {
  color: var(--chrome-navy);
  border-color: #6e8a1c;
  background: var(--chrome-green-surface);
  box-shadow: inset 0 1px #fff9, 0 0 0 1px #6e8a1c;
}
.solution-journey .sj-options input:checked + span b { color: var(--chrome-navy); }
.solution-journey .sj-options input:focus-visible + span,
.solution-journey .sj-task input:focus-visible + .sj-task-check { outline-color: var(--chrome-blue-deep); }
.solution-journey .sj-checkin-submit, .sj-studio-next {
  color: #fff;
  background: var(--chrome-blue-surface);
  box-shadow: inset 0 1px #9cd9f266;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
.solution-journey .sj-checkin-submit:hover:not(:disabled) { color: var(--chrome-navy); background: var(--chrome-green-surface); }
.solution-journey .sj-checkin-submit:active:not(:disabled) { transform: scale(.985); }
.solution-journey .sj-checkin-submit:disabled { color: #4e6a82; background: #dce8f1; box-shadow: none; }
.solution-journey .sj-workspace { background: linear-gradient(135deg, #f9fcff, #e8f4f3); border-color: #a4c1d4; }
.solution-journey .sj-workspace::before { background: linear-gradient(90deg, var(--chrome-blue), var(--chrome-cyan), var(--chrome-green)); }
.solution-journey .sj-role-tags span { color: var(--chrome-navy); background: #dfedf8; border-color: #a9c4d7; }
.solution-journey :is(.sj-workspace-header small, .sj-support-card small, .sj-plan-meta,
    .sj-task small, .sj-workspace-note small, .sj-checkin-feedback, .sj-dashboard-reading p,
    .sj-chart-caption, .sj-phone-footer, .sj-dashboard-top > span:last-child) { color: var(--chrome-muted); }
.solution-journey :is(.sj-checkin legend small, .sj-dashboard-heading small,
    .sj-dashboard-reading small, .sj-phone-footer b) { color: var(--chrome-blue-deep); }
.solution-journey .sj-task-check { border-color: #91a9bd; }
.solution-journey .sj-task input:checked + .sj-task-check { color: var(--chrome-navy); background: var(--chrome-green-surface); border-color: #7d9d27; }
.solution-journey .sj-task input:checked + .sj-task-check::after { border-color: var(--chrome-navy); }
.solution-journey .sj-task:hover .sj-task-check { border-color: var(--chrome-blue-deep); }
.solution-journey .sj-task-count, .solution-journey .sj-workspace-note { color: var(--chrome-blue-deep); }
.solution-journey .sj-support-card { background: #f6fbff; border-color: #aac8db; }
.solution-journey .sj-support-icon { color: var(--chrome-blue-deep); }
.solution-journey .sj-support-card h4 { color: var(--chrome-navy); }
.solution-journey .sj-support-detail { color: var(--chrome-blue-deep); }
.solution-journey .sj-loop { color: var(--chrome-navy); background: linear-gradient(115deg, #d5eae4, #e0edb4); border-color: #abc58b; }
.solution-journey .sj-loop > span { color: var(--chrome-blue-deep); }
.solution-journey .sj-restart { color: var(--chrome-navy); border-color: #789d43; }
.solution-journey .sj-restart:hover { color: var(--chrome-blue-deep); border-color: var(--chrome-blue-deep); }
.sj-studio-notice { background: #ecf8fff2; }
.sj-studio-notice > span { color: var(--chrome-blue); }
.sj-studio-screen > i { border-color: var(--chrome-blue); }
.sj-studio-screen > i:nth-of-type(2), .sj-studio-screen > i:nth-of-type(3) { border-color: var(--chrome-green); }
.sj-studio-seal span { background: var(--chrome-blue); }
.sj-studio-seal span:nth-child(even) { background: var(--chrome-green); }

/* Method, audiences and contact panels share the same material and selection rules. */
.science-pillar { border-color: #9bb9cf; }
.science-path, .dimensions-zone { background: #f4faffad; border-color: #a8c5d7; }
.science-path article { border-color: #a8c5d7; }
.science-path span { color: var(--chrome-blue-deep); }
.science-path p, .privacy-note { color: var(--chrome-muted); }
.dimension-tab, .audience-tab { color: var(--chrome-navy); border-color: #90afc8; background: #e5f2fb; }
.dimension-tab:hover, .audience-tab:hover { background: #ddf0cc; border-color: #8ea946; }
.dimension-tab[aria-selected="true"], .audience-tab[aria-selected="true"] {
  color: var(--chrome-navy);
  background: var(--chrome-green-surface);
  border-color: #8ba72a;
  box-shadow: var(--chrome-shine);
}
.dimension-chip { color: var(--chrome-navy); background: linear-gradient(115deg, #cce2f7, #def1ed); }
.dimension-chip small { color: var(--chrome-blue-deep); }
.audience-items li::before { color: var(--chrome-blue-deep); }
.role-detail summary { transition: color 180ms ease; }
.role-detail summary:hover, .role-detail[open] summary { color: var(--chrome-blue-deep); }
.role-detail summary::after { color: var(--chrome-blue-deep); }
.role-detail[open] { border-bottom-color: #9bbd3d; }
.employee-space { background: linear-gradient(130deg, #9fc6ef, #c9eee5 75%); }
.employee-space-card { background: #f1f8fc; border-color: #f8ffff; }
.employee-space-card svg { color: var(--chrome-blue); }
.employee-space-pulse i { background: var(--chrome-blue); }
.employee-space-pulse i:nth-child(3) { background: var(--chrome-green); }
.demo-band { background: linear-gradient(115deg, #bfd9f3, #c9eee5 65%, #d9eaa8); border-color: #9abcc6; box-shadow: inset 0 1px #ffffff80; }
.demo-band .kicker { color: var(--chrome-blue-deep); }
.demo-band p:last-child { color: var(--chrome-muted); }
.demo-dialog { color: var(--chrome-navy); background: var(--chrome-paper); border-color: #a2c6df; }
.demo-header, .demo-dialog footer { background: linear-gradient(115deg, #c5ddf7, #d9eee8); border-color: #a1bdcf; }
#demo-status { background: #e7f1ce; color: var(--chrome-navy); border: 1px solid #aec879; }

/* Video stays dark, with the same blue chrome and green feedback controls. */
.film-dialog { background: radial-gradient(ellipse at 70% 40%, #07518a, #041b3b 70%); }
.film-copy .kicker { color: var(--chrome-green); }
.film-copy p { color: #bed7e9; }
.film-close { color: #fff; background: var(--chrome-blue-surface); border-color: #5aadd5; box-shadow: inset 0 1px #c2f0ff33; }
.film-close:hover { color: var(--chrome-navy); background: var(--chrome-green-surface); border-color: #c8df70; }
.film-action { color: #d1e8f8; border-color: #6da6ca; transition: color 180ms ease, border-color 180ms ease; }
.film-action:hover:not(:disabled), .film-action[aria-pressed="true"] { color: var(--chrome-green); border-color: var(--chrome-green); }
.film-action:disabled { color: #96b5cd; cursor: wait; }
.video-shell { border-color: #4c9ac7; box-shadow: 0 22px 80px #0006, 0 0 0 1px #8dbaf112; }
.video-status { background: linear-gradient(145deg, #082a5a, #07578a); }
.video-status p { color: #d8eaf7; }
.video-status a:hover { color: var(--chrome-green); }
.video-start { color: var(--chrome-navy); background: var(--chrome-green-surface); box-shadow: var(--chrome-shine), 0 8px 25px #041b3b40; }
.video-start:hover { background: linear-gradient(135deg, #b9e8ff, #78d4ee); }
.video-status-loader { border-color: #8dbaf14d; border-top-color: var(--chrome-green); border-right-color: var(--chrome-cyan); }
.video-muted-label { background: #082a5ae8; color: #e1f1fc; border-color: #75b5d2; }

@media (prefers-reduced-motion: reduce) {
  .story-scroll-progress > span { transition: none; }
  .close-button:hover .close-x, .text-action:hover span { transform: none; }
  :is(.glass-button, .icon-button, .nav-link, .demo-cta, .dimension-tab,
      .audience-tab, .film-close, .video-start, .panel-nav a):active { transform: none; }
}

/* Let system colors replace the brand surfaces without losing state markers. */
@media (forced-colors: active) {
  :root { --chrome-navy: CanvasText; --chrome-muted: CanvasText; --chrome-blue-deep: LinkText; }
  :is(.story-dialog, .story-top, .story-bottom, .demo-dialog, .demo-header,
      .demo-dialog footer, .film-dialog, .video-status, .demo-band) { background: Canvas; color: CanvasText; }
  :is(.nav-link, .demo-cta, .hero-payoff .demo-cta, .glass-button, .icon-button,
      .dimension-tab, .audience-tab, .film-close, .video-start, .panel-nav a) {
    color: ButtonText;
    border: 1px solid ButtonText;
    background: ButtonFace;
    box-shadow: none;
  }
  .panel-nav a[aria-current="page"], .dimension-tab[aria-selected="true"],
  .audience-tab[aria-selected="true"], .solution-journey .sj-nav a[aria-current="step"],
  .solution-journey .sj-options input:checked + span,
  .solution-journey .sj-task input:checked + .sj-task-check {
    color: HighlightText;
    background: Highlight;
    border-color: Highlight;
  }
  .solution-journey .sj-task input:checked + .sj-task-check::after { border-color: HighlightText; }
  .solution-journey .sj-options input:checked + span b { color: HighlightText; }
  .solution-journey .sj-nav a[aria-current="step"] > span { color: HighlightText; }
  :is(button, a, summary, [tabindex]):focus-visible,
  :is(.hero, .film-dialog) :is(button, a):focus-visible { outline-color: Highlight; }
  .story-scroll-progress > span, .problem-experience .problem-progress-track i,
  .solution-journey .sj-track > span { background: Highlight; }
}