/* ==========================================================================
   Zyntel — Integrations ecosystem (animated)
   Signals travel IN (coral), decisions travel OUT (brand red). Hub carries
   the black Zyntel logo. SMIL packets are paused off-screen / reduced motion
   by app.js; everything below is CSS-only motion.
   ========================================================================== */
.gfx--ecosystem { overflow: visible; }
.eco-halo { fill: var(--zy-color-brand-50); transform-box: fill-box; transform-origin: center; }
.eco-orbit { transform-box: view-box; transform-origin: 320px 290px; }
.eco-orbit .g-ring { stroke: var(--zy-color-brand-200); stroke-dasharray: 2 7; }
.gfx--ecosystem .g-ring--inner { stroke: var(--zy-color-brand-100); }

.eco-spoke { fill: none; stroke: var(--zy-color-brand-100); stroke-width: 1.5; }
.eco-flow { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 3 9; }
.eco-node--in .eco-flow { stroke: var(--zy-color-spectrum-coral); }
.eco-node--out .eco-flow { stroke: var(--zy-color-brand-600); }

.eco-tile__pop { transform-box: fill-box; transform-origin: center; }
.eco-tile__lift { transform-box: fill-box; transform-origin: center; transition: transform var(--zy-motion-duration-component) var(--zy-motion-easing-standard); }
.eco-tile__card { fill: var(--zy-color-neutral-0); stroke: var(--zy-color-neutral-100); filter: drop-shadow(0 10px 18px rgba(38, 8, 34, 0.14)); }
.eco-tile__icon { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[data-eco="0"] .eco-tile__tint { fill: #FFEDE6; } [data-eco="0"] .eco-tile__icon { stroke: #E4572E; }
[data-eco="1"] .eco-tile__tint { fill: var(--zy-color-plum-50); } [data-eco="1"] .eco-tile__icon { stroke: var(--zy-color-plum-600); }
[data-eco="2"] .eco-tile__tint { fill: #FDEAF4; } [data-eco="2"] .eco-tile__icon { stroke: var(--zy-color-spectrum-magenta); }
[data-eco="3"] .eco-tile__tint { fill: var(--zy-color-brand-50); } [data-eco="3"] .eco-tile__icon { stroke: var(--zy-color-brand-600); }
[data-eco="4"] .eco-tile__tint { fill: #FDEAF4; } [data-eco="4"] .eco-tile__icon { stroke: var(--zy-color-spectrum-magenta); }
[data-eco="5"] .eco-tile__tint { fill: var(--zy-color-plum-50); } [data-eco="5"] .eco-tile__icon { stroke: var(--zy-color-plum-600); }
[data-eco="6"] .eco-tile__tint { fill: #FFEDE6; } [data-eco="6"] .eco-tile__icon { stroke: #E4572E; }
[data-eco="7"] .eco-tile__tint { fill: var(--zy-color-plum-50); } [data-eco="7"] .eco-tile__icon { stroke: var(--zy-color-plum-600); }
.eco-node:hover .eco-tile__lift { transform: translateY(-4px) scale(1.06); }
.eco-node:hover .eco-spoke { stroke: var(--zy-color-brand-200); }

.eco-packet--in { fill: var(--zy-color-spectrum-coral); filter: drop-shadow(0 0 4px rgba(255, 122, 89, 0.8)); }
.eco-packet--out { fill: var(--zy-color-brand-600); filter: drop-shadow(0 0 4px rgba(224, 36, 61, 0.7)); }
.eco-packets { opacity: 0; transition: opacity 600ms var(--zy-motion-easing-standard) 900ms; }
.is-live .eco-packets { opacity: 1; }

.eco-hub { fill: var(--zy-color-neutral-0); stroke: var(--zy-color-brand-600); stroke-width: 2; filter: drop-shadow(0 18px 30px rgba(224, 36, 61, 0.22)); }
.eco-hub__logo { fill: #000; }
.eco-hub__caption { fill: var(--zy-color-text-secondary); font-family: var(--zy-font-display); font-size: 8.5px; font-weight: 600; letter-spacing: 0.2em; }
.eco-ripple { fill: none; stroke: var(--zy-color-brand-300); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }

/* legend */
.eco-legend { display: flex; justify-content: center; gap: var(--zy-space-6); margin-top: var(--zy-space-2); color: var(--zy-color-text-secondary); }
.eco-legend span { display: inline-flex; align-items: center; gap: var(--zy-space-2); }
.eco-legend span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.eco-legend__in::before { background: var(--zy-color-spectrum-coral); box-shadow: 0 0 6px rgba(255, 122, 89, 0.8); }
.eco-legend__out::before { background: var(--zy-color-brand-600); box-shadow: 0 0 6px rgba(224, 36, 61, 0.7); }

@media (prefers-reduced-motion: no-preference) {
  .js [data-eco] .eco-tile__pop { opacity: 0; }
  .is-live .eco-tile__pop { animation: eco-pop 700ms var(--zy-motion-easing-standard) calc(var(--i) * 110ms) both; }
  .is-live .eco-flow { animation: eco-flow 900ms linear infinite; }
  .is-live .eco-orbit { animation: eco-spin 80s linear infinite; }
  .is-live .eco-halo { animation: eco-breathe 5s ease-in-out infinite; }
  .is-live .eco-ripple { animation: eco-ripple 2.8s ease-out infinite; }
  .is-live .eco-ripple--2 { animation-delay: 1.4s; }
}
@keyframes eco-pop { from { opacity: 0; transform: translateY(8px) scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes eco-flow { from { stroke-dashoffset: 12; } to { stroke-dashoffset: 0; } }
@keyframes eco-spin { to { transform: rotate(360deg); } }
@keyframes eco-breathe { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes eco-ripple { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.65); opacity: 0; } }
.is-still .eco-packets { display: none; }

/* ==========================================================================
   Transaction floor (Built to operate) — hi-tech perspective
   ========================================================================== */
.gfx--perspective .g-floor { stroke: var(--zy-color-brand-100); }
.gfx--perspective .g-horizon { stroke: var(--zy-color-brand-200); }
.zp-hz-a { stop-color: var(--zy-color-brand-50); stop-opacity: 0; }
.zp-hz-b { stop-color: var(--zy-color-brand-50); stop-opacity: 1; }
.zp-scan { stroke: var(--zy-color-brand-400); stroke-width: 1.5; opacity: 0; }
.zp-packet--coral   { fill: var(--zy-color-spectrum-coral); }
.zp-packet--rose    { fill: var(--zy-color-brand-500); }
.zp-packet--pink    { fill: var(--zy-color-spectrum-pink); }
.zp-packet--magenta { fill: var(--zy-color-spectrum-magenta); }
.zp-packet { filter: drop-shadow(0 0 3px rgba(242, 60, 84, 0.55)); }
.zp-connector { stroke: var(--zy-color-brand-300); }
.zp-pulse { fill: none; stroke: var(--zy-color-brand-600); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 90 1400; stroke-dashoffset: 1490; filter: drop-shadow(0 0 5px rgba(224, 36, 61, 0.6)); }
.zp-beam-a { stop-color: var(--zy-color-brand-500); stop-opacity: 0.4; }
.zp-beam-b { stop-color: var(--zy-color-brand-500); stop-opacity: 0; }
.zp-beam { transform-box: fill-box; transform-origin: bottom center; }
.zp-ring { fill: var(--zy-color-brand-50); stroke: var(--zy-color-brand-300); }
.zp-ping { fill: none; stroke: var(--zy-color-brand-500); opacity: 0; transform-box: fill-box; transform-origin: center; }
.zp-node { filter: drop-shadow(0 0 6px rgba(224, 36, 61, 0.7)); }

@media (prefers-reduced-motion: no-preference) {
  .zp-scan { animation: zp-scan 4.5s cubic-bezier(0.55, 0, 0.9, 0.6) infinite; }
  .zp-pulse { animation: zp-pulse 3.6s linear infinite; }
  .zp-beam { animation: zp-beam 3.6s ease-in-out calc(var(--i) * 0.9s) infinite; }
  .zp-ping { animation: zp-ping 3.6s ease-out calc(var(--i) * 0.9s) infinite; }
}
@keyframes zp-scan { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 0.9; } 100% { transform: translateY(370px); opacity: 0; } }
@keyframes zp-pulse { from { stroke-dashoffset: 1490; } to { stroke-dashoffset: 0; } }
@keyframes zp-beam { 0%, 100% { transform: scaleY(0.55); opacity: 0.5; } 25% { transform: scaleY(1); opacity: 1; } }
@keyframes zp-ping { 0% { transform: scale(0.6); opacity: 0.9; } 40% { transform: scale(1.8); opacity: 0; } 100% { opacity: 0; } }
.gfx--perspective.is-still .zp-packet { display: none; }

/* ==========================================================================
   Decision layer (The platform) — channels ask, one layer decides, same answer
   ========================================================================== */
.value__media--layer { background: transparent; }   /* the section's seam shows through */
.iv--layer .g-dot { fill: var(--zy-color-brand-100); }
.lay-wire { fill: none; stroke: var(--zy-color-brand-200); stroke-width: 1.5; stroke-dasharray: 3 6; }
.lay-card { fill: var(--zy-color-neutral-0); stroke: var(--zy-color-neutral-100); filter: drop-shadow(0 10px 18px rgba(38, 8, 34, 0.12)); }
.lay-icon-bg { fill: var(--zy-color-brand-50); }
.lay-channel:nth-child(odd) .lay-icon-bg { fill: var(--zy-color-plum-50); }
.lay-icon { fill: none; stroke: var(--zy-color-brand-600); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lay-label { fill: var(--zy-color-text-primary); font-family: var(--zy-font-display); font-size: 13px; font-weight: 500; }
.lay-label--muted { fill: var(--zy-color-text-secondary); font-size: 12px; letter-spacing: 0.02em; }
.lay-check circle { fill: var(--zy-color-brand-600); }
.lay-check path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lay-layer { fill: var(--zy-color-neutral-0); stroke: var(--zy-color-brand-600); stroke-width: 2; filter: drop-shadow(0 20px 32px rgba(224, 36, 61, 0.22)); }
.lay-flash { fill: var(--zy-color-brand-50); stroke: var(--zy-color-brand-500); stroke-width: 3; }
.lay-scan-mid { stop-color: var(--zy-color-brand-100); stop-opacity: 0.9; }
.lay-logo { fill: #000; }
.lay-caption { fill: var(--zy-color-text-secondary); font-family: var(--zy-font-display); font-size: 9px; font-weight: 600; letter-spacing: 0.18em; }
.lay-caption--cap { fill: var(--zy-color-text-primary); }
.lay-track { fill: var(--zy-color-neutral-100); }
.lay-fill { fill: var(--zy-color-brand-600); }
.lay-cap { stroke: var(--zy-color-neutral-950); stroke-width: 2; }
.lay-person__bg { fill: var(--zy-color-brand-50); }
.lay-person--1 .lay-person__bg { fill: var(--zy-color-plum-50); }
.lay-person--2 .lay-person__bg { fill: #FFEDE6; }
.lay-person__icon { fill: none; stroke: var(--zy-color-plum-700); stroke-width: 1.8; stroke-linecap: round; }
.lay-person__halo { fill: none; stroke: var(--zy-color-brand-400); stroke-width: 2; }
.lay-q { fill: var(--zy-color-spectrum-coral); filter: drop-shadow(0 0 4px rgba(255, 122, 89, 0.8)); }
.lay-a rect { fill: var(--zy-color-brand-600); filter: drop-shadow(0 4px 8px rgba(224, 36, 61, 0.45)); }
.lay-a path { stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.lay-d { fill: var(--zy-color-brand-600); filter: drop-shadow(0 0 4px rgba(224, 36, 61, 0.7)); }
@media (prefers-reduced-motion: no-preference) {
  .lay-scan { animation: lay-scan 4s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
  .lay-wire { animation: eco-flow 900ms linear infinite; }
}
@keyframes lay-scan { 0%, 25% { transform: translateX(0); } 45%, 100% { transform: translateX(560px); } }
.is-still .lay-packets, .is-still .lay-flash { display: none; }
.is-still .lay-check { opacity: 1; }

/* ==========================================================================
   The platform — frosted glass over brand waves, scroll-driven
   --p (0 → 1, set by app.js) assembles the graphic and parallaxes the waves.
   Waves are a feathered colour field (masked), never a hard-edged box.
   ========================================================================== */
#value { --p: 1; overflow-x: clip; }   /* waves bleed past the edge by design; never cause sideways scroll */
.value__grid { position: relative; isolation: isolate; }
.value__waves { position: absolute; z-index: -1; left: -10%; right: -10%; bottom: -6%; height: 72%; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 55% 55%, #000 45%, transparent 78%);
          mask-image: radial-gradient(ellipse 60% 55% at 55% 55%, #000 45%, transparent 78%);
  opacity: calc(0.25 + var(--p) * 0.75);
  transform: translate3d(0, calc((1 - var(--p)) * 90px), 0) scale(calc(0.9 + var(--p) * 0.1));
  will-change: transform, opacity; }
.value__waves .gfx { width: 100%; height: 100%; }

.value__panel { position: relative;
  background: rgba(255, 255, 255, 0.64);
  -webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 1.5rem;
  box-shadow: 0 40px 80px -40px rgba(38, 8, 34, 0.35), 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 0 0 1px rgba(224, 36, 61, 0.06);
  padding: var(--zy-space-8) var(--zy-space-6); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .value__panel { background: rgba(255, 255, 255, 0.95); } }
@media (min-width: 64em) {
  .value__waves { left: auto; right: -12%; top: 4%; bottom: 4%; height: auto; width: 68%;
    -webkit-mask-image: radial-gradient(ellipse 58% 60% at 50% 50%, #000 42%, transparent 76%);
            mask-image: radial-gradient(ellipse 58% 60% at 50% 50%, #000 42%, transparent 76%); }
  .value__panel { padding: var(--zy-space-12); }
  #value .value__panel { transform: translate3d(0, calc((1 - var(--p)) * 40px), 0); }   /* id beats the generic reveal transform */
}

/* waves: softer, lighter palette */
.wv path { stroke: none; }
.wv--1 { opacity: 0.85; } .wv--2 { opacity: 0.7; } .wv--3 { opacity: 0.62; } .wv--4 { opacity: 0.55; }
.wv--lines path { fill: none; stroke: rgba(255, 255, 255, 0.6); stroke-width: 1.2; }
@media (prefers-reduced-motion: no-preference) {
  .wv { transform-box: view-box; animation: wv-drift 18s ease-in-out infinite alternate; }
  .wv--2 { animation-duration: 22s; animation-delay: -4s; }
  .wv--3 { animation-duration: 26s; animation-delay: -9s; }
  .wv--4 { animation-duration: 30s; animation-delay: -2s; }
  .wv--lines { animation-duration: 16s; animation-direction: alternate-reverse; }
}
@keyframes wv-drift { from { transform: translate(-30px, 8px); } to { transform: translate(30px, -12px); } }

/* graphic assembles with scroll: channels drop in, customers rise, layer settles */
.iv--layer .lay-channel { transform: translateY(calc((1 - var(--p)) * -70px)); opacity: calc(0.15 + var(--p) * 0.85); transform-box: fill-box; }
.iv--layer .lay-person { transform: translateY(calc((1 - var(--p)) * 70px)); opacity: calc(0.15 + var(--p) * 0.85); transform-box: fill-box; }
.iv--layer .lay-layer, .iv--layer .lay-flash { transform-box: fill-box; transform-origin: center; transform: scale(calc(0.9 + var(--p) * 0.1)); }
.iv--layer .lay-wire { opacity: var(--p); }

/* "old way → new way" rows switch on as you scroll */
.value__panel .shift { border-color: rgba(20, 13, 20, 0.09); }
/* on glass over colour, secondary text steps one shade darker to hold AA (≈5.7:1 at the strongest tint) */
.value__panel .c-secondary, .value__panel .shift__from, .value__panel .shift__to { color: var(--zy-color-neutral-600); }
.shift__arrow { transition: transform 500ms var(--zy-motion-easing-standard) 150ms, opacity 500ms; opacity: 0.35; }
.shift__to { transition: color 500ms var(--zy-motion-easing-standard) 250ms; color: var(--zy-color-text-secondary); }
.shift.is-on .shift__from { color: var(--zy-color-neutral-600); }
.shift.is-on .shift__arrow { transform: translateX(4px); opacity: 1; }
.shift.is-on .shift__to, .value__panel .shift.is-on .shift__to { color: var(--zy-color-text-primary); }
@media (prefers-reduced-motion: reduce) {
  .value__waves, .value__panel, .iv--layer .lay-channel, .iv--layer .lay-person, .iv--layer .lay-layer { transform: none !important; }
}

/* ==========================================================================
   Built for your teams — glass cards over a feathered wave field
   ========================================================================== */
.teams { overflow-x: clip; }
.teams__stage { position: relative; isolation: isolate; margin-top: var(--zy-space-4); }
.teams__waves { position: absolute; z-index: -1; left: -8%; right: -8%; top: 8%; bottom: 0; pointer-events: none; transform: scaleX(-1);
  -webkit-mask-image: radial-gradient(ellipse 55% 60% at 50% 55%, #000 35%, transparent 75%);
          mask-image: radial-gradient(ellipse 55% 60% at 50% 55%, #000 35%, transparent 75%); opacity: 0.85; }
.teams__waves .gfx { width: 100%; height: 100%; filter: blur(28px); }   /* soft glow in the gutters, no hard shapes */
.teams__waves .wv { animation: none; }   /* static: a moving blurred layer costs repaints for no story value */
.teams__grid { row-gap: var(--zy-space-6); }

.team { position: relative; display: flex; flex-direction: column; padding: var(--zy-space-6); border-top: 0; border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 30px 60px -38px rgba(38, 8, 34, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform 500ms var(--zy-motion-easing-standard), box-shadow 500ms var(--zy-motion-easing-standard), border-color 500ms; }
.teams__grid .team:hover { transform: translateY(-6px);   /* scoped to beat the reveal transform */
  border-color: rgba(255, 255, 255, 1);
  box-shadow: 0 40px 70px -36px rgba(224, 36, 61, 0.35), inset 0 1px 0 #fff, 0 0 0 1px rgba(224, 36, 61, 0.12); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .team { background: rgba(255, 255, 255, 0.95); } }

.team__head { display: flex; align-items: center; gap: var(--zy-space-4); padding-bottom: var(--zy-space-5); border-bottom: 1px solid rgba(20, 13, 20, 0.08); }
.team__icon { margin: 0; }
.team__icon .aicon-tile { background: var(--zy-color-neutral-0); }
.team__who { display: grid; gap: 0.15rem; }
.team__head { min-height: 4rem; }   /* keeps the rule level when a label or role wraps to two lines */
.team__label { color: var(--zy-color-text-signal); }
.team__role { margin-top: 0; }
.team .c-secondary { color: var(--zy-color-neutral-600); }   /* AA on glass */
.team__title { margin-top: var(--zy-space-5); }
.team__points { margin-top: var(--zy-space-5); border-top: 0; display: grid; gap: var(--zy-space-1); }
.team__points li { padding: var(--zy-space-2) 0 var(--zy-space-2) var(--zy-space-8); border-bottom: 0; }
.team__points li::before { left: 0; top: 0.72em; width: 1.25rem; height: 1.25rem; border: 0; border-radius: 50%; background: var(--zy-color-brand-50); box-shadow: inset 0 0 0 1px var(--zy-color-brand-100); }
.team__points li::after { content: ""; position: absolute; left: 0.43rem; top: calc(0.72em + 0.3rem); width: 0.32rem; height: 0.58rem; border: solid var(--zy-color-brand-600); border-width: 0 2px 2px 0; transform: rotate(45deg); }
@media (min-width: 64em) { .team { padding: var(--zy-space-8); } }
@media (prefers-reduced-motion: reduce) { .teams__grid .team, .teams__grid .team:hover { transform: none; } }

/* ==========================================================================
   Solutions tiles - animated use cases (price / visits / parity)
   ========================================================================== */
.iv--tile .g-dot { fill: var(--zy-color-brand-100); }
.tl-row, .tl-frame { filter: drop-shadow(0 8px 14px rgba(38, 8, 34, 0.1)); }
.tl-chip-text, .tl-stamp-text, .tl-source-text { fill: #fff; font-family: var(--zy-font-display); font-weight: 600; font-size: 8px; letter-spacing: 0.1em; }
.tl-stamp-text { font-size: 10px; letter-spacing: 0.02em; font-weight: 500; }
.tl-stamp-bg { fill: var(--zy-color-neutral-950); }
.tl-tank { fill: var(--zy-color-neutral-100); stroke: var(--zy-color-neutral-200); }
.tl-cap { stroke: var(--zy-color-neutral-950); stroke-width: 2; stroke-dasharray: 4 3; }
.tl-cap-label { fill: var(--zy-color-text-secondary); font-family: var(--zy-font-display); font-weight: 600; font-size: 8.5px; letter-spacing: 0.14em; }
.tl-order { fill: var(--zy-color-spectrum-coral); filter: drop-shadow(0 0 4px rgba(255, 122, 89, 0.8)); }
.tl-track { fill: none; stroke: var(--zy-color-neutral-100); stroke-width: 10; }
.tl-progress { fill: none; stroke-width: 10; stroke-linecap: round; }
.tl-node { fill: #fff; stroke: var(--zy-color-neutral-200); stroke-width: 2; }
.tl-check { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tl-spark path { stroke: var(--zy-color-spectrum-coral); stroke-width: 2.5; stroke-linecap: round; }
.tl-source { fill: #fff; stroke: var(--zy-color-brand-600); stroke-width: 1.5; }
.tl-source-text { fill: var(--zy-color-neutral-950); letter-spacing: 0.2em; }
.tl-wire { fill: none; stroke: var(--zy-color-brand-200); stroke-width: 1.5; stroke-dasharray: 3 5; }
.tl-label { fill: var(--zy-color-text-secondary); font-family: var(--zy-font-display); font-weight: 500; font-size: 10px; }
.tl-offer-bar { fill: rgba(255, 255, 255, 0.9); }
.tl-same-line { stroke: var(--zy-color-brand-300); stroke-width: 1.5; stroke-dasharray: 3 4; }
.is-still .tl-order { display: none; }

/* ==========================================================================
   Built to operate - interactive shopping globe
   Copy + a refined 2x2 metric grid on the left, the globe on the right.
   ========================================================================== */
.scale--globe { padding-bottom: var(--zy-layout-section-space-md); overflow-x: clip; }
.scale__grid { align-items: center; row-gap: var(--zy-space-10); }
.scale--globe .scale__title { max-width: 13ch; }
.scale--globe .scale__metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: var(--zy-space-10); border-top: 1px solid var(--zy-color-border-default); }
.scale--globe .metric--scale { padding: var(--zy-space-6) var(--zy-space-5) var(--zy-space-6) 0; border-bottom: 1px solid var(--zy-color-border-default); border-left: 0; background: none; transition: background 400ms var(--zy-motion-easing-standard); }
.scale--globe .metric--scale:nth-child(even) { padding-left: var(--zy-space-5); border-left: 1px solid var(--zy-color-border-default); }
.scale--globe .metric--scale .metric__value { font-size: var(--zy-type-heading-1-size); line-height: 1.1; }
.scale--globe .metric--scale .metric__value::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; vertical-align: 0.5em; border-radius: 50%; background: var(--zy-color-brand-600); box-shadow: 0 0 0 4px var(--zy-color-brand-50); }
.scale--globe .metric--scale:hover { background: linear-gradient(to right, var(--zy-color-brand-50), transparent); }
.scale--globe .metric__label { margin-top: var(--zy-space-2); }

.globe { position: relative; margin: 0; width: 100%; max-width: 40rem; justify-self: center; touch-action: pan-y; user-select: none; }
.globe::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle at 50% 55%, rgba(224, 36, 61, 0.14), transparent 65%); filter: blur(30px); z-index: -1; }
.globe__canvas { display: block; cursor: grab; }
.globe.is-dragging .globe__canvas { cursor: grabbing; }
.globe__tip { position: absolute; left: 0; top: 0; pointer-events: none; padding: 0.3rem 0.65rem; border-radius: var(--zy-radius-full); background: var(--zy-color-neutral-950); color: #fff; font-weight: 500; white-space: nowrap; }
.globe__hint { display: flex; align-items: center; justify-content: center; gap: var(--zy-space-2); margin-top: calc(var(--zy-space-4) * -1); color: var(--zy-color-text-secondary); }
.globe__hint-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--zy-color-brand-600); box-shadow: 0 0 0 0 rgba(224, 36, 61, 0.5); }
@media (prefers-reduced-motion: no-preference) { .globe__hint-dot { animation: globe-hint 2s ease-out infinite; } }
@keyframes globe-hint { 0% { box-shadow: 0 0 0 0 rgba(224, 36, 61, 0.45); } 100% { box-shadow: 0 0 0 10px rgba(224, 36, 61, 0); } }
@media (max-width: 29.99em) { .scale--globe .metric--scale .metric__value { font-size: var(--zy-type-heading-3-size); } }

/* keep the decision-layer graphic balanced: centred and capped, never stretched */
.value__media--layer { display: grid; place-items: center; padding: var(--zy-space-6) var(--zy-grid-margin); }
.value__media--layer .gfx { width: 100%; height: auto; max-width: 38rem; max-height: 34rem; }
@media (max-width: 63.99em) {
  .value__media--layer { aspect-ratio: auto; padding-block: var(--zy-space-8) 0; }
  .value__media--layer .gfx { max-width: 27rem; }
}

/* Small screens: the graphic is width-bound, so scale the type INSIDE it (SVG
   user units) per range — every label lands at ~12–14px on screen. */
@media (max-width: 63.99em) { .value__media--layer .gfx { max-width: 27rem; } }
@media (max-width: 22.99em) {   /* 320px phones */
  .iv--layer .lay-label { font-size: 27px; }
  .iv--layer .lay-label--muted { font-size: 24px; }
  .iv--layer .lay-caption { font-size: 18px; letter-spacing: 0.1em; }
}
@media (min-width: 23em) and (max-width: 29.99em) {
  .iv--layer .lay-label { font-size: 22px; }
  .iv--layer .lay-label--muted { font-size: 20px; }
  .iv--layer .lay-caption { font-size: 15px; letter-spacing: 0.12em; }
}
@media (min-width: 30em) and (max-width: 63.99em) {
  .iv--layer .lay-label { font-size: 18px; }
  .iv--layer .lay-label--muted { font-size: 17px; }
  .iv--layer .lay-caption { font-size: 13px; letter-spacing: 0.12em; }
}

/* ==========================================================================
   Today -> With Zyntel  (the "shifts" comparison)
   Explicit columns with a grey cross and a red tick instead of a hard-to-read
   strike-through. Phones stack, with the arrow turning to point down.
   ========================================================================== */
.shifts__head { display: none; }
.shifts { margin-top: var(--zy-space-6); border-top: 0; display: grid; gap: var(--zy-space-2); }
.shift { display: grid; grid-template-columns: 1fr; align-items: center; gap: var(--zy-space-2); padding: var(--zy-space-3); border-bottom: 0; border-radius: 1rem;
  background: rgba(255, 255, 255, 0.45); transition: background 350ms var(--zy-motion-easing-standard); }
.shift:hover { background: rgba(255, 255, 255, 0.8); }
.shift__side { display: flex; align-items: flex-start; gap: var(--zy-space-3); min-width: 0; }
.shift__mark { flex: none; display: grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; margin-top: 1px; }
.shift__mark svg { width: 0.85rem; height: 0.85rem; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.shift__mark--from { background: var(--zy-color-neutral-100); }
.shift__mark--from svg { stroke: var(--zy-color-neutral-600); }
.shift__mark--to { background: var(--zy-color-brand-600); }
.shift__mark--to svg { stroke: #fff; }
.shift__from { color: var(--zy-color-neutral-600); text-decoration: none; }   /* no strike: the cross already says "before" */
.shift__to { font-weight: var(--zy-font-weight-medium); color: var(--zy-color-text-primary); }
.shift__arrow { width: 1rem; height: 1rem; color: var(--zy-color-brand-600); justify-self: start; margin-left: 0.1875rem; transform: rotate(90deg); }   /* phones: points down, centred under the marks */

@media (min-width: 48em) {
  .shifts__head { display: grid; grid-template-columns: minmax(0, 1fr) 2rem minmax(0, 1fr); gap: var(--zy-space-4); margin-top: var(--zy-space-8); padding: 0 var(--zy-space-3) var(--zy-space-2); }
  .shifts__head-to { grid-column: 3; color: var(--zy-color-text-signal); }
  .shifts { margin-top: 0; }
  .shift { grid-template-columns: minmax(0, 1fr) 2rem minmax(0, 1fr); gap: var(--zy-space-4); padding: var(--zy-space-4) var(--zy-space-3); background: transparent; border-radius: 0.75rem; }
  .shifts { gap: 0; }
  .shift + .shift { border-top: 1px solid rgba(20, 13, 20, 0.07); }   /* reads as one clean table */
  .shift__arrow { transform: none; justify-self: center; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .shift { transition: none; } }