/* Avanza AI Studio v42 — Section 01: scattered signals to one operating brief */

.operating-story {
  --story-ink: #0b0c0e;
  --story-muted: #747880;
  --story-line: rgba(11, 12, 14, .105);
  --story-surface: #f3f3f1;
  --story-void: #090a0c;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(104px, min(9vw, 13.5svh), 168px) !important;
  padding-bottom: clamp(188px, min(17vw, 25svh), 300px) !important;
  color: var(--story-ink);
  background:
    radial-gradient(circle at 8% 18%, rgba(0, 0, 0, .035), transparent 26%),
    radial-gradient(circle at 92% 42%, rgba(0, 0, 0, .025), transparent 25%),
    #fff;
}

.operating-story::before {
  position: absolute;
  top: 0;
  right: var(--gutter);
  left: var(--gutter);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(10, 11, 13, .14), transparent);
  content: "";
}

.operating-story::after {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: -1px;
  left: 0;
  height: clamp(190px, 19vw, 310px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(104, 105, 106, .16) 34%, #090a0c 96%);
  content: "";
  pointer-events: none;
}

.operating-story-intro {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(340px, .62fr);
  gap: clamp(52px, 8vw, 132px);
  align-items: end;
}

.operating-story-heading h2 {
  max-width: 970px;
  font-size: clamp(3.35rem, min(5.8vw, 8.75svh), 6.25rem);
  line-height: .91;
  letter-spacing: -.075em;
}

.operating-story-heading h2 span {
  display: block;
  color: #8b8e94;
}

.operating-story-copy {
  max-width: 520px;
  padding-bottom: clamp(4px, .7vw, 12px);
  color: #666a71;
  font-size: clamp(.96rem, min(1.06vw, 1.8svh), 1.12rem);
  line-height: 1.72;
}

.operating-canvas {
  position: relative;
  z-index: 2;
  margin-top: clamp(64px, min(6.2vw, 9.5svh), 108px);
  overflow: hidden;
  border: 1px solid rgba(11, 12, 14, .11);
  border-radius: clamp(28px, 2.5vw, 42px);
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .88), rgba(247, 247, 245, .74)),
    #f7f7f5;
  box-shadow: 0 42px 120px rgba(12, 13, 15, .11), inset 0 1px 0 #fff;
}

.operating-canvas::before {
  position: absolute;
  inset: 0;
  opacity: .28;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
  content: "";
  pointer-events: none;
}

.operating-canvas-head,
.operating-canvas-foot {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.operating-canvas-head {
  min-height: clamp(62px, min(5vw, 7.4svh), 78px);
  padding: 0 clamp(20px, 2vw, 34px);
  border-bottom: 1px solid var(--story-line);
  color: #8a8d93;
  font-size: clamp(.51rem, .55vw, .64rem);
  font-weight: 800;
  letter-spacing: .14em;
}

.operating-canvas-head > span:first-child {
  display: flex;
  align-items: center;
  gap: 12px;
}

.operating-canvas-head > span:first-child i {
  width: clamp(38px, 4vw, 72px);
  height: 1px;
  background: linear-gradient(90deg, rgba(11, 12, 14, .08), rgba(11, 12, 14, .34));
}

.operating-live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #4b4f55;
  letter-spacing: .04em;
  text-transform: none;
}

.operating-live b {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #111317;
  box-shadow: 0 0 0 5px rgba(17, 19, 23, .07);
}

.operating-canvas-body {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: clamp(590px, min(46vw, 73svh), 720px);
  grid-template-columns: minmax(250px, .92fr) minmax(170px, .53fr) minmax(430px, 1.42fr);
  align-items: stretch;
}

.operating-connections {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.connection-path {
  fill: none;
  stroke: rgba(21, 23, 27, .16);
  stroke-width: 1.15;
  stroke-dasharray: .035 .023;
  stroke-dashoffset: 1;
  vector-effect: non-scaling-stroke;
}

.path-output {
  stroke: rgba(21, 23, 27, .28);
  stroke-width: 1.3;
  stroke-dasharray: .05 .018;
}

.operating-canvas.visible .connection-path {
  animation: operatingPath 1.35s cubic-bezier(.2, .78, .2, 1) forwards;
}

.operating-canvas.visible .path-two { animation-delay: .08s; }
.operating-canvas.visible .path-three { animation-delay: .16s; }
.operating-canvas.visible .path-four { animation-delay: .24s; }
.operating-canvas.visible .path-five { animation-delay: .32s; }
.operating-canvas.visible .path-output { animation-delay: .62s; }

.source-stream,
.intelligence-layer,
.operating-brief {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.source-stream {
  padding: clamp(26px, 2.6vw, 42px) clamp(18px, 2vw, 32px);
}

.operating-column-head {
  display: grid;
  gap: 7px;
  padding-inline: 3px;
}

.operating-column-head small {
  color: #a0a3a9;
  font-size: clamp(.47rem, .48vw, .56rem);
  font-weight: 800;
  letter-spacing: .15em;
}

.operating-column-head strong {
  max-width: 210px;
  font-size: clamp(.83rem, .86vw, 1rem);
  line-height: 1.35;
  letter-spacing: -.025em;
}

.signal-stack {
  position: relative;
  display: grid;
  gap: clamp(8px, .75vw, 12px);
  margin-top: clamp(24px, 2.2vw, 35px);
}

.signal-card {
  position: relative;
  width: min(100%, 292px);
  padding: clamp(13px, 1vw, 17px) clamp(14px, 1.1vw, 18px);
  border: 1px solid rgba(11, 12, 14, .095);
  border-radius: clamp(14px, 1.05vw, 18px);
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 16px 40px rgba(13, 14, 16, .055), inset 0 1px 0 #fff;
  backdrop-filter: blur(14px);
  opacity: 0;
  transform: translate3d(-16px, 0, 0);
}

.operating-canvas.visible .signal-card {
  animation: signalResolve .72s cubic-bezier(.2, .8, .2, 1) forwards;
}

.operating-canvas.visible .signal-card:nth-child(2) { animation-delay: .08s; }
.operating-canvas.visible .signal-card:nth-child(3) { animation-delay: .16s; }
.operating-canvas.visible .signal-card:nth-child(4) { animation-delay: .24s; }
.operating-canvas.visible .signal-card:nth-child(5) { animation-delay: .32s; }
.operating-canvas.visible .signal-card:nth-child(6) { animation-delay: .4s; }

.signal-card:nth-child(even) {
  margin-left: clamp(8px, 1.5vw, 25px);
}

.signal-card::after {
  position: absolute;
  top: 50%;
  right: -7px;
  width: 7px;
  height: 7px;
  border: 2px solid #f7f7f5;
  border-radius: 50%;
  background: #1a1c20;
  box-shadow: 0 0 0 4px rgba(26, 28, 32, .06);
  content: "";
  transform: translateY(-50%);
}

.signal-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.signal-card-head span,
.signal-card-head i {
  font-size: clamp(.44rem, .45vw, .52rem);
  font-style: normal;
  font-weight: 800;
  letter-spacing: .12em;
}

.signal-card-head span { color: #9699a0; }

.signal-card-head i {
  padding: 5px 7px;
  border-radius: 999px;
  color: #4e5258;
  letter-spacing: .02em;
  background: #f0f0ee;
}

.signal-card > strong {
  display: block;
  margin-top: 8px;
  color: #222429;
  font-size: clamp(.68rem, .68vw, .79rem);
  line-height: 1.35;
  letter-spacing: -.025em;
}

.signal-card > small {
  display: block;
  margin-top: 5px;
  color: #989ba1;
  font-size: clamp(.5rem, .5vw, .58rem);
  line-height: 1.45;
}

.source-more { display: none; }

.intelligence-layer {
  display: grid;
  align-content: center;
  align-self: center;
  min-height: 79%;
  padding: clamp(20px, 1.65vw, 28px) clamp(15px, 1.3vw, 22px);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: clamp(22px, 1.8vw, 30px);
  color: #fff;
  background:
    radial-gradient(circle at 30% 12%, rgba(255, 255, 255, .11), transparent 27%),
    linear-gradient(155deg, #22252a, #0d0f12 64%);
  box-shadow: 0 35px 72px rgba(7, 8, 10, .24), inset 0 1px 0 rgba(255, 255, 255, .13);
  transform: translateZ(0);
}

.intelligence-layer::before,
.intelligence-layer::after {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 1px;
  background: rgba(25, 27, 31, .28);
  content: "";
}

.intelligence-layer::before { left: -17px; }
.intelligence-layer::after { right: -17px; }

.intelligence-brand {
  display: grid;
  justify-items: center;
  text-align: center;
}

.intelligence-mark {
  display: grid;
  width: clamp(45px, 3.7vw, 58px);
  height: clamp(45px, 3.7vw, 58px);
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: clamp(14px, 1.1vw, 18px);
  background: rgba(255, 255, 255, .07);
  box-shadow: 0 15px 35px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .1);
}

.intelligence-mark img { width: 61%; }

.intelligence-brand > div {
  display: grid;
  margin-top: 14px;
}

.intelligence-brand small {
  color: rgba(255, 255, 255, .38);
  font-size: clamp(.43rem, .43vw, .5rem);
  font-weight: 800;
  letter-spacing: .15em;
}

.intelligence-brand strong {
  margin-top: 6px;
  font-size: clamp(.78rem, .8vw, .93rem);
  letter-spacing: -.025em;
}

.intelligence-stages {
  display: grid;
  gap: 1px;
  margin-top: clamp(22px, 2vw, 31px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 15px;
  background: rgba(255, 255, 255, .07);
}

.intelligence-stages li {
  position: relative;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 9px;
  align-items: center;
  min-height: clamp(51px, 3.7vw, 59px);
  padding: 9px 10px;
  background: rgba(8, 9, 11, .69);
}

.intelligence-stages li::after {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  content: "";
  transform: translateY(-50%);
}

.operating-canvas.visible .intelligence-stages li::after {
  animation: intelligencePulse 2.4s ease-in-out infinite;
}

.operating-canvas.visible .intelligence-stages li:nth-child(2)::after { animation-delay: .42s; }
.operating-canvas.visible .intelligence-stages li:nth-child(3)::after { animation-delay: .84s; }
.operating-canvas.visible .intelligence-stages li:nth-child(4)::after { animation-delay: 1.26s; }

.intelligence-stages li > span {
  color: rgba(255, 255, 255, .24);
  font-size: .45rem;
  font-weight: 800;
}

.intelligence-stages li div { display: grid; }

.intelligence-stages strong {
  font-size: clamp(.59rem, .59vw, .68rem);
  font-weight: 700;
}

.intelligence-stages small {
  margin-top: 3px;
  padding-right: 8px;
  color: rgba(255, 255, 255, .34);
  font-size: clamp(.44rem, .43vw, .5rem);
  line-height: 1.35;
}

.approval-gate {
  display: grid;
  gap: 10px;
  margin-top: 13px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: rgba(255, 255, 255, .055);
}

.approval-gate > div { display: grid; }

.approval-gate small {
  color: rgba(255, 255, 255, .34);
  font-size: .42rem;
  font-weight: 800;
  letter-spacing: .12em;
}

.approval-gate strong {
  margin-top: 4px;
  font-size: clamp(.59rem, .58vw, .67rem);
}

.approval-gate > span {
  justify-self: start;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 7px;
  color: rgba(255, 255, 255, .7);
  font-size: .43rem;
  font-weight: 800;
  background: rgba(255, 255, 255, .06);
}

.operating-brief {
  align-self: center;
  min-height: calc(100% - clamp(52px, 4vw, 70px));
  margin: clamp(26px, 2.35vw, 40px) clamp(24px, 2.4vw, 42px) clamp(26px, 2.35vw, 40px) clamp(32px, 3vw, 52px);
  padding: clamp(23px, 2.1vw, 36px);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: clamp(22px, 1.9vw, 31px);
  color: #fff;
  background:
    radial-gradient(circle at 88% 5%, rgba(255, 255, 255, .085), transparent 28%),
    linear-gradient(145deg, #1a1c20, #090a0c 72%);
  box-shadow: 0 40px 88px rgba(7, 8, 10, .3), inset 0 1px 0 rgba(255, 255, 255, .12);
  opacity: 0;
  transform: translate3d(18px, 0, 0) scale(.985);
}

.operating-canvas.visible .operating-brief {
  animation: briefResolve .9s .56s cubic-bezier(.2, .8, .2, 1) forwards;
}

.brief-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.brief-topbar > div { display: grid; }

.brief-topbar small {
  color: rgba(255, 255, 255, .34);
  font-size: clamp(.43rem, .43vw, .5rem);
  font-weight: 800;
  letter-spacing: .14em;
}

.brief-topbar strong {
  margin-top: 7px;
  font-size: clamp(1.06rem, 1.22vw, 1.42rem);
  letter-spacing: -.045em;
}

.brief-topbar > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 999px;
  color: rgba(255, 255, 255, .52);
  font-size: clamp(.44rem, .44vw, .51rem);
  white-space: nowrap;
  background: rgba(255, 255, 255, .04);
}

.brief-topbar > span i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e7e9e5;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .06);
}

.brief-date {
  margin-top: 9px;
  color: rgba(255, 255, 255, .29);
  font-size: clamp(.48rem, .48vw, .56rem);
}

.brief-decision {
  margin-top: clamp(20px, 1.7vw, 28px);
  padding: clamp(17px, 1.45vw, 23px);
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .105), rgba(255, 255, 255, .045));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}

.brief-item-label,
.brief-decision-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brief-item-label span {
  color: rgba(255, 255, 255, .43);
  font-size: clamp(.43rem, .43vw, .5rem);
  font-weight: 800;
  letter-spacing: .12em;
}

.brief-item-label em,
.brief-priorities em {
  padding: 5px 7px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 7px;
  color: rgba(255, 255, 255, .63);
  font-size: clamp(.41rem, .41vw, .47rem);
  font-style: normal;
  font-weight: 800;
  background: rgba(255, 255, 255, .045);
}

.brief-decision > strong {
  display: block;
  margin-top: 11px;
  font-size: clamp(.8rem, .84vw, .98rem);
  line-height: 1.35;
  letter-spacing: -.025em;
}

.brief-decision > p {
  margin-top: 6px;
  color: rgba(255, 255, 255, .42);
  font-size: clamp(.51rem, .52vw, .61rem);
  line-height: 1.55;
}

.brief-decision-actions {
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .52);
  font-size: clamp(.45rem, .45vw, .52rem);
}

.brief-decision-actions b {
  color: rgba(255, 255, 255, .82);
  font-weight: 700;
}

.brief-priorities {
  display: grid;
  gap: 1px;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 15px;
  background: rgba(255, 255, 255, .065);
}

.brief-priorities article {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  min-height: clamp(77px, 5.6vw, 88px);
  padding: 12px 13px;
  background: rgba(8, 9, 11, .74);
}

.brief-index {
  color: rgba(255, 255, 255, .2);
  font-size: .43rem;
  font-weight: 800;
}

.brief-priorities article > div { min-width: 0; }

.brief-priorities small {
  display: block;
  color: rgba(255, 255, 255, .3);
  font-size: clamp(.4rem, .4vw, .47rem);
  font-weight: 800;
  letter-spacing: .11em;
}

.brief-priorities strong {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  font-size: clamp(.61rem, .63vw, .73rem);
  line-height: 1.35;
  letter-spacing: -.018em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brief-priorities p {
  margin-top: 3px;
  overflow: hidden;
  color: rgba(255, 255, 255, .34);
  font-size: clamp(.45rem, .46vw, .54rem);
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brief-question {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, .085);
  border-radius: 13px;
  background: rgba(255, 255, 255, .035);
}

.brief-question > span {
  color: rgba(255, 255, 255, .35);
  font-size: .8rem;
}

.brief-question p { display: grid; }

.brief-question small {
  color: rgba(255, 255, 255, .28);
  font-size: .4rem;
  font-weight: 800;
  letter-spacing: .11em;
}

.brief-question strong {
  margin-top: 4px;
  font-size: clamp(.57rem, .59vw, .68rem);
}

.brief-question em {
  color: rgba(255, 255, 255, .28);
  font-size: clamp(.4rem, .4vw, .47rem);
  font-style: normal;
  white-space: nowrap;
}

.operating-canvas-foot {
  min-height: clamp(70px, min(6vw, 8.8svh), 90px);
  gap: 24px;
  padding: 0 clamp(20px, 2vw, 34px);
  border-top: 1px solid var(--story-line);
}

.operating-canvas-foot p {
  color: #6e7279;
  font-size: clamp(.66rem, .7vw, .82rem);
  line-height: 1.5;
}

.operating-canvas-foot p strong {
  color: #17191d;
  font-weight: 750;
}

.operating-canvas-foot > span {
  color: #9699a0;
  font-size: clamp(.48rem, .49vw, .57rem);
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
}

@keyframes operatingPath {
  from { stroke-dashoffset: 1; opacity: .2; }
  to { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes signalResolve {
  from { opacity: 0; transform: translate3d(-16px, 0, 0); filter: blur(2px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

@keyframes briefResolve {
  from { opacity: 0; transform: translate3d(18px, 0, 0) scale(.985); filter: blur(3px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes intelligencePulse {
  0%, 68%, 100% { opacity: .3; transform: translateY(-50%) scale(.8); box-shadow: none; }
  22% { opacity: 1; transform: translateY(-50%) scale(1.12); box-shadow: 0 0 0 5px rgba(255, 255, 255, .055); }
}

@media (hover: hover) and (pointer: fine) {
  .signal-card {
    transition: border-color .3s ease, box-shadow .35s ease, transform .35s cubic-bezier(.2, .8, .2, 1), background .3s ease;
  }

  .signal-card:hover {
    z-index: 2;
    border-color: rgba(11, 12, 14, .17);
    background: #fff;
    box-shadow: 0 22px 52px rgba(13, 14, 16, .11), inset 0 1px 0 #fff;
    transform: translate3d(4px, -2px, 0);
  }

  .operating-brief {
    transition: box-shadow .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
  }

  .operating-brief:hover {
    box-shadow: 0 48px 105px rgba(7, 8, 10, .36), inset 0 1px 0 rgba(255, 255, 255, .14);
    transform: translateY(-3px);
  }
}

@media (max-width: 1180px) {
  .operating-story-intro {
    grid-template-columns: minmax(0, 1.08fr) minmax(310px, .62fr);
    gap: 54px;
  }

  .operating-canvas-body {
    grid-template-columns: minmax(225px, .83fr) minmax(165px, .52fr) minmax(385px, 1.3fr);
  }

  .operating-brief {
    margin-left: 28px;
    margin-right: 26px;
  }

  .source-stream {
    padding-inline: 20px 15px;
  }

  .signal-card:nth-child(even) { margin-left: 8px; }
}

@media (max-width: 980px) {
  .operating-story {
    padding-bottom: clamp(170px, 24vw, 235px) !important;
  }

  .operating-story-intro {
    grid-template-columns: 1fr;
    gap: 27px;
    text-align: center;
  }

  .operating-story-heading .chapter-label { justify-content: center; }

  .operating-story-heading h2,
  .operating-story-copy {
    margin-inline: auto;
  }

  .operating-story-copy { max-width: 660px; }

  .operating-canvas-body {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) minmax(180px, .42fr);
  }

  .operating-connections { display: none; }

  .source-stream {
    padding: 32px;
    border-right: 1px solid var(--story-line);
  }

  .signal-stack {
    grid-template-columns: 1fr 1fr;
  }

  .signal-card,
  .signal-card:nth-child(even) {
    width: 100%;
    margin-left: 0;
  }

  .signal-card::after { display: none; }

  .intelligence-layer {
    align-self: stretch;
    min-height: 0;
    margin: 25px 25px 25px 0;
  }

  .intelligence-layer::before,
  .intelligence-layer::after { display: none; }

  .operating-brief {
    grid-column: 1 / -1;
    min-height: 0;
    margin: 0 25px 25px;
  }
}

@media (max-width: 720px) {
  .operating-story {
    padding-top: 96px !important;
    padding-bottom: 172px !important;
  }

  .operating-story-heading h2 {
    font-size: clamp(3rem, 13vw, 4.2rem);
    line-height: .93;
  }

  .operating-story-copy {
    max-width: 560px;
    font-size: .98rem;
  }

  .operating-canvas {
    width: calc(100% + 2px);
    margin-top: 54px;
    margin-left: -1px;
    border-radius: 27px;
  }

  .operating-canvas-head {
    min-height: 62px;
    padding-inline: 18px;
  }

  .operating-canvas-head > span:first-child {
    gap: 8px;
    font-size: .46rem;
  }

  .operating-canvas-head > span:first-child i { width: 24px; }
  .operating-live { font-size: .48rem; }

  .operating-canvas-body { display: block; }

  .source-stream {
    padding: 28px 18px 22px;
    border-right: 0;
    border-bottom: 1px solid var(--story-line);
  }

  .operating-column-head {
    justify-items: center;
    text-align: center;
  }

  .operating-column-head strong { max-width: none; }

  .signal-stack {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 22px;
  }

  .signal-card {
    min-height: 116px;
    padding: 13px;
  }

  .signal-card:nth-child(n+5) { display: none; }

  .signal-card-head {
    display: grid;
    justify-content: start;
    gap: 6px;
  }

  .signal-card-head i {
    justify-self: start;
    padding: 4px 6px;
  }

  .signal-card > strong {
    margin-top: 8px;
    font-size: .67rem;
  }

  .signal-card > small { font-size: .5rem; }

  .source-more {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: 5px;
    color: #8d9096;
    font-size: .54rem;
  }

  .source-more span {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid var(--story-line);
    border-radius: 9px;
    color: #35383d;
    font-weight: 800;
    background: rgba(255, 255, 255, .7);
  }

  .intelligence-layer {
    display: block;
    margin: 18px;
    padding: 20px;
  }

  .intelligence-brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 13px;
    text-align: left;
  }

  .intelligence-brand > div { margin-top: 0; }
  .intelligence-mark { flex: 0 0 48px; width: 48px; height: 48px; }

  .intelligence-stages {
    grid-template-columns: 1fr 1fr;
    margin-top: 18px;
  }

  .intelligence-stages li {
    min-height: 67px;
    grid-template-columns: 21px 1fr;
    padding: 10px;
  }

  .intelligence-stages li::after { display: none; }

  .approval-gate {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .approval-gate > span { justify-self: end; }

  .operating-brief {
    margin: 0 18px 18px;
    padding: 20px 16px;
    border-radius: 21px;
  }

  .brief-topbar { gap: 10px; }
  .brief-topbar strong { font-size: 1.04rem; }
  .brief-topbar > span { padding: 6px 8px; font-size: .43rem; }

  .brief-decision { padding: 16px; }

  .brief-priorities article {
    min-height: 83px;
    grid-template-columns: 19px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 11px 10px;
  }

  .brief-priorities strong,
  .brief-priorities p {
    white-space: normal;
  }

  .brief-priorities p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .brief-question {
    grid-template-columns: 19px minmax(0, 1fr);
  }

  .brief-question > em { display: none; }

  .operating-canvas-foot {
    min-height: 0;
    align-items: flex-start;
    padding: 20px 18px 23px;
    flex-direction: column;
    gap: 9px;
  }

  .operating-canvas-foot p { font-size: .67rem; }
  .operating-canvas-foot > span { white-space: normal; }
}

@media (max-width: 430px) {
  .operating-story-heading h2 {
    font-size: clamp(2.75rem, 13.2vw, 3.45rem);
  }

  .operating-story-copy { font-size: .92rem; }

  .operating-canvas-head > span:first-child i { display: none; }

  .signal-card {
    min-height: 121px;
    padding: 12px 11px;
  }

  .signal-card > strong { font-size: .63rem; }
  .signal-card > small { font-size: .47rem; }

  .intelligence-layer { margin: 14px; padding: 17px 14px; }
  .intelligence-stages { grid-template-columns: 1fr; }
  .intelligence-stages li { min-height: 54px; }

  .approval-gate {
    grid-template-columns: 1fr;
  }

  .approval-gate > span { justify-self: start; }

  .operating-brief {
    margin: 0 14px 14px;
    padding: 18px 13px;
  }

  .brief-topbar > span { display: none; }
  .brief-item-label em { display: none; }

  .brief-priorities article {
    grid-template-columns: 17px minmax(0, 1fr);
  }

  .brief-priorities em { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .connection-path,
  .signal-card,
  .operating-brief,
  .intelligence-stages li::after {
    animation: none !important;
  }

  .connection-path { stroke-dashoffset: 0; }
  .signal-card,
  .operating-brief { opacity: 1; transform: none; filter: none; }
}

/* v43 refinement — Section 01 tools view */
.operating-story-intro {
  display: block;
  text-align: center;
}

.operating-story-heading .chapter-label {
  justify-content: center;
}

.operating-story-heading h2 {
  margin-inline: auto;
  max-width: 980px;
}

.source-stream {
  padding-right: clamp(20px, 1.8vw, 28px);
}

.device-stage {
  position: relative;
  min-height: 430px;
  margin-top: clamp(24px, 2vw, 34px);
}

.device-screen {
  position: absolute;
  border: 1px solid rgba(11, 12, 14, .11);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(246, 246, 244, .98));
  box-shadow: 0 26px 70px rgba(11, 12, 14, .1), inset 0 1px 0 rgba(255, 255, 255, .96);
  opacity: 0;
  transform: translate3d(-18px, 0, 0);
}

.operating-canvas.visible .device-screen {
  animation: signalResolve .82s cubic-bezier(.2, .8, .2, 1) forwards;
}

.operating-canvas.visible .phone-screen {
  animation-delay: .16s;
}

.desktop-screen {
  left: 0;
  right: 30px;
  top: 0;
  padding: 12px;
  z-index: 1;
}

.desktop-screen::before {
  position: absolute;
  left: 50%;
  bottom: -24px;
  width: 80px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(19, 20, 23, .2), rgba(19, 20, 23, .08));
  content: "";
  transform: translateX(-50%);
}

.desktop-screen::after {
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 18px;
  height: 24px;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, rgba(59, 61, 66, .34), rgba(59, 61, 66, .12));
  content: "";
  transform: translateX(-50%);
}

.device-screen-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 3px 10px;
  color: #8a8d93;
  font-size: .5rem;
  font-weight: 800;
  letter-spacing: .11em;
}

.device-screen-chrome i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d0d2d5;
}

.device-screen-chrome span {
  margin-left: auto;
}

.desktop-screen-body {
  overflow: hidden;
  border: 1px solid rgba(11, 12, 14, .08);
  border-radius: 18px;
  background: linear-gradient(180deg, #fbfbfa, #f3f3f1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88);
}

.desktop-screen-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid rgba(11, 12, 14, .07);
}

.desktop-screen-head > div {
  display: grid;
  gap: 6px;
}

.desktop-screen-head small,
.phone-screen-body > small,
.tool-tile small {
  color: #9b9ea4;
  font-size: .44rem;
  font-weight: 800;
  letter-spacing: .14em;
}

.desktop-screen-head strong,
.phone-screen-body > strong {
  color: #1e2125;
  font-size: .85rem;
  line-height: 1.28;
  letter-spacing: -.03em;
}

.desktop-screen-head > span {
  align-self: center;
  padding: 6px 8px;
  border-radius: 999px;
  color: #4e5258;
  font-size: .48rem;
  font-weight: 800;
  background: rgba(11, 12, 14, .06);
}

.tool-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 16px 0;
}

.tool-pill {
  padding: 7px 10px;
  border: 1px solid rgba(11, 12, 14, .08);
  border-radius: 999px;
  color: #3f4349;
  font-size: .53rem;
  font-weight: 700;
  background: rgba(255, 255, 255, .75);
}

.tool-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px 16px 16px;
}

.tool-tile {
  padding: 13px 12px;
  border: 1px solid rgba(11, 12, 14, .08);
  border-radius: 15px;
  background: rgba(255, 255, 255, .78);
}

.tool-tile strong {
  display: block;
  margin-top: 7px;
  color: #23262b;
  font-size: .69rem;
  line-height: 1.34;
  letter-spacing: -.025em;
}

.tool-tile p {
  margin-top: 5px;
  color: #8d9096;
  font-size: .53rem;
  line-height: 1.4;
}

.phone-screen {
  right: 0;
  bottom: 10px;
  width: 148px;
  padding: 10px;
  z-index: 3;
  border-radius: 28px;
  background: linear-gradient(180deg, #0f1114, #1d2025 24%, #f7f7f5 24%, #efefec 100%);
  box-shadow: 0 32px 76px rgba(10, 11, 13, .18), inset 0 1px 0 rgba(255, 255, 255, .2);
}

.phone-screen-notch {
  width: 44%;
  height: 14px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: #0c0e11;
}

.phone-screen-body {
  display: grid;
  gap: 10px;
  padding: 6px 8px 4px;
}

.phone-tool-list {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.phone-tool-list li {
  display: grid;
  gap: 3px;
  padding: 10px 10px 9px;
  border: 1px solid rgba(11, 12, 14, .07);
  border-radius: 13px;
  background: rgba(255, 255, 255, .72);
}

.phone-tool-list span {
  color: #25282d;
  font-size: .58rem;
  font-weight: 700;
}

.phone-tool-list em {
  color: #8a8d94;
  font-size: .47rem;
  font-style: normal;
}

.phone-screen-foot {
  padding: 9px 10px;
  border-radius: 12px;
  color: #5d626a;
  font-size: .48rem;
  font-weight: 700;
  background: rgba(11, 12, 14, .05);
}

.connection-path.path-three {
  stroke: rgba(21, 23, 27, .21);
}

@media (hover: hover) and (pointer: fine) {
  .device-screen {
    transition: border-color .3s ease, box-shadow .35s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
  }

  .desktop-screen:hover {
    transform: translate3d(3px, -2px, 0);
    box-shadow: 0 34px 88px rgba(11, 12, 14, .13), inset 0 1px 0 rgba(255, 255, 255, .98);
  }

  .phone-screen:hover {
    transform: translate3d(2px, -4px, 0);
    box-shadow: 0 38px 88px rgba(10, 11, 13, .21), inset 0 1px 0 rgba(255, 255, 255, .2);
  }
}

@media (max-width: 1180px) {
  .desktop-screen {
    right: 18px;
  }
}

@media (max-width: 980px) {
  .device-stage {
    min-height: 365px;
  }

  .desktop-screen {
    right: 12px;
  }

  .phone-screen {
    right: 6px;
    bottom: 2px;
  }
}

@media (max-width: 720px) {
  .operating-story-intro {
    text-align: center;
  }

  .device-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 0;
    gap: 0;
  }

  .device-screen {
    position: relative;
    opacity: 1;
    transform: none;
  }

  .desktop-screen {
    right: auto;
    width: 100%;
    max-width: 420px;
  }

  .desktop-screen::before {
    bottom: -19px;
    width: 70px;
    height: 14px;
  }

  .desktop-screen::after {
    bottom: -10px;
    height: 18px;
  }

  .phone-screen {
    right: auto;
    bottom: auto;
    width: min(46vw, 176px);
    align-self: flex-end;
    margin-top: -38px;
    margin-right: 10px;
  }

  .desktop-screen-head {
    padding: 14px 14px 12px;
  }

  .tool-pill-row,
  .tool-grid {
    padding-left: 14px;
    padding-right: 14px;
  }

  .tool-grid {
    gap: 8px;
    padding-bottom: 14px;
  }

  .tool-tile {
    padding: 11px 10px;
  }
}

@media (max-width: 430px) {
  .desktop-screen {
    padding: 10px;
    border-radius: 22px;
  }

  .desktop-screen-head strong,
  .phone-screen-body > strong {
    font-size: .77rem;
  }

  .tool-pill-row {
    gap: 6px;
  }

  .tool-pill {
    padding: 6px 9px;
    font-size: .5rem;
  }

  .tool-grid {
    grid-template-columns: 1fr;
  }

  .phone-screen {
    width: min(49vw, 168px);
    margin-top: -28px;
    margin-right: 4px;
    padding: 9px;
  }

  .phone-tool-list li {
    padding: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .device-screen {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}


/* Avanza AI Studio v45 — Section 01 Phase 1 structural redesign */

.operating-story-v45 {
  --ecosystem-ink: #111216;
  --ecosystem-muted: #6f737b;
  --ecosystem-line: rgba(17, 18, 22, .09);
  --ecosystem-dark: #08090b;
  --ecosystem-dark-2: #111317;
  padding-top: clamp(110px, min(9vw, 13svh), 168px) !important;
  padding-bottom: clamp(154px, min(14vw, 21svh), 236px) !important;
  background:
    radial-gradient(circle at 10% 18%, rgba(0, 0, 0, .028), transparent 27%),
    radial-gradient(circle at 90% 28%, rgba(0, 0, 0, .022), transparent 25%),
    #fff;
}

.operating-story-v45::after {
  height: clamp(150px, 16vw, 245px);
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(49,51,55,.2) 42%, #090a0c 98%);
}

.operating-story-v45 .operating-story-intro {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: clamp(24px, 2.2vw, 34px);
  text-align: center;
}

.operating-story-v45 .operating-story-heading {
  display: grid;
  width: 100%;
  justify-items: center;
}

.operating-story-v45 .operating-story-heading .chapter-label {
  justify-content: center;
}

.operating-story-v45 .operating-story-heading h2 {
  max-width: 1240px;
  margin-inline: auto;
  font-size: clamp(3.2rem, min(5.1vw, 8svh), 5.65rem);
  line-height: .94;
  letter-spacing: -.071em;
  text-align: center;
}

.operating-story-v45 .operating-story-heading h2 span {
  display: block;
  color: #8b8e94;
}

.operating-story-v45 .operating-story-copy {
  max-width: 690px;
  margin: 0 auto;
  padding: 0;
  color: #646870;
  font-size: clamp(.98rem, min(1.05vw, 1.75svh), 1.1rem);
  line-height: 1.7;
  text-align: center;
}

.operating-ecosystem-stage {
  position: relative;
  z-index: 2;
  margin-top: clamp(58px, min(6vw, 8.8svh), 96px);
}

.operating-ecosystem-shell {
  position: relative;
  min-height: clamp(760px, 67vw, 930px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: clamp(34px, 3.3vw, 52px);
  background:
    radial-gradient(circle at 51% 18%, rgba(255,255,255,.11), transparent 29%),
    radial-gradient(circle at 18% 58%, rgba(127,133,145,.08), transparent 28%),
    linear-gradient(145deg, #111318 0%, #090a0c 47%, #050608 100%);
  box-shadow:
    0 50px 130px rgba(7,8,10,.2),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(255,255,255,.025);
}

.operating-ecosystem-shell::before {
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  content: "";
  pointer-events: none;
}

.operating-ecosystem-shell::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255,255,255,.025), transparent 20%, transparent 80%, rgba(255,255,255,.02));
  content: "";
  pointer-events: none;
}

.ecosystem-light {
  position: absolute;
  top: 5%;
  left: 50%;
  width: min(76%, 970px);
  height: 57%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,.16), rgba(255,255,255,.035) 44%, transparent 72%);
  filter: blur(18px);
  transform: translateX(-50%);
  pointer-events: none;
}

.ecosystem-grid {
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: linear-gradient(180deg, transparent 5%, rgba(0,0,0,.55) 38%, transparent 88%);
  pointer-events: none;
}

.ecosystem-floor {
  position: absolute;
  right: 7%;
  bottom: 3.5%;
  left: 7%;
  height: 30%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,.095), rgba(255,255,255,.025) 38%, transparent 70%);
  filter: blur(20px);
  transform: perspective(600px) rotateX(68deg);
  transform-origin: center bottom;
  pointer-events: none;
}

.ecosystem-device-labels {
  position: absolute;
  z-index: 8;
  top: clamp(24px, 2.4vw, 38px);
  left: 50%;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,.43);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  transform: translateX(-50%);
  white-space: nowrap;
}

.ecosystem-device-labels i {
  width: 18px;
  height: 1px;
  background: rgba(255,255,255,.18);
}

.ecosystem-device {
  position: absolute;
  margin: 0;
}

.ecosystem-device-desktop {
  z-index: 4;
  top: clamp(84px, 8vw, 112px);
  left: 50%;
  width: min(69%, 900px);
  transform: translateX(-50%);
}

.ecosystem-device-tablet {
  z-index: 2;
  left: clamp(16px, 4vw, 62px);
  bottom: clamp(82px, 8.5vw, 126px);
  width: min(34%, 430px);
  transform: rotate(-2deg);
  transform-origin: center bottom;
}

.ecosystem-device-mobile {
  z-index: 6;
  right: clamp(8px, 1vw, 16px);
  bottom: clamp(62px, 6.5vw, 104px);
  width: min(19%, 244px);
  transform: rotate(1.7deg);
  transform-origin: center bottom;
}

.ecosystem-hardware {
  position: relative;
  padding: clamp(8px, .85vw, 12px);
  border: 1px solid rgba(255,255,255,.34);
  background: linear-gradient(145deg, #f9f9f7, #d8dadc 48%, #f1f2f1 100%);
  box-shadow:
    0 38px 90px rgba(0,0,0,.38),
    0 9px 28px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(0,0,0,.13);
}

.ecosystem-hardware-desktop {
  border-radius: clamp(20px, 1.8vw, 29px);
}

.ecosystem-hardware-tablet {
  padding: 10px;
  border-radius: clamp(24px, 2.4vw, 34px);
  box-shadow: 0 30px 74px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.96);
}

.ecosystem-hardware-mobile {
  padding: 8px;
  border-radius: clamp(31px, 3vw, 43px);
  background: linear-gradient(145deg, #f6f6f4, #cacdd0 48%, #f1f2f1 100%);
  box-shadow: 0 38px 92px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.96);
}

.ecosystem-camera {
  position: absolute;
  z-index: 4;
  top: 4px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #74777b;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
  transform: translateX(-50%);
}

.ecosystem-hardware-tablet .ecosystem-camera {
  top: 50%;
  right: 3px;
  left: auto;
  transform: translateY(-50%);
}

.ecosystem-desktop-stand {
  position: relative;
  width: 31%;
  height: clamp(58px, 5vw, 78px);
  margin: -1px auto 0;
  background: linear-gradient(90deg, #b5b8bb, #f1f2f1 45%, #b6b9bc);
  clip-path: polygon(40% 0, 60% 0, 67% 84%, 33% 84%);
  filter: drop-shadow(0 19px 15px rgba(0,0,0,.24));
}

.ecosystem-desktop-stand span {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 92%;
  height: 14%;
  border-radius: 999px;
  background: linear-gradient(180deg, #e7e8e8, #a7aaad);
  transform: translateX(-50%);
}

.ecosystem-phone-island {
  position: absolute;
  z-index: 5;
  top: 13px;
  left: 50%;
  width: 36%;
  height: 18px;
  border-radius: 999px;
  background: #101216;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  transform: translateX(-50%);
}

.ecosystem-app {
  overflow: hidden;
  border: 1px solid rgba(17,18,22,.12);
  color: var(--ecosystem-ink);
  background: linear-gradient(180deg, #fbfbfa, #f3f3f1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
}

.ecosystem-app-desktop {
  aspect-ratio: 16 / 9.55;
  border-radius: clamp(14px, 1.15vw, 20px);
}

.ecosystem-app-tablet {
  aspect-ratio: 4 / 5.25;
  border-radius: 22px;
}

.ecosystem-app-mobile {
  aspect-ratio: 9 / 18.7;
  border-radius: clamp(25px, 2.5vw, 35px);
}

.ecosystem-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: clamp(52px, 4.5vw, 66px);
  padding: 10px clamp(13px, 1.4vw, 20px);
  border-bottom: 1px solid rgba(17,18,22,.075);
  background: rgba(255,255,255,.72);
}

.ecosystem-brand {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.ecosystem-brand-mark {
  display: grid;
  flex: 0 0 auto;
  width: clamp(29px, 2.3vw, 36px);
  height: clamp(29px, 2.3vw, 36px);
  place-items: center;
  border: 1px solid rgba(17,18,22,.08);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(17,18,22,.07);
}

.ecosystem-brand-mark img {
  width: 66%;
  height: 66%;
  object-fit: contain;
}

.ecosystem-brand > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.ecosystem-brand strong {
  overflow: hidden;
  color: #202227;
  font-size: clamp(.66rem, .78vw, .84rem);
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ecosystem-brand small {
  overflow: hidden;
  color: #92959b;
  font-size: clamp(.46rem, .51vw, .56rem);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ecosystem-status {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid rgba(17,18,22,.07);
  border-radius: 999px;
  color: #666a71;
  font-size: clamp(.48rem, .52vw, .57rem);
  font-weight: 800;
  background: rgba(17,18,22,.035);
}

.ecosystem-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #55a36e;
  box-shadow: 0 0 0 3px rgba(85,163,110,.11);
}

.ecosystem-content {
  display: grid;
  align-content: center;
  min-height: calc(100% - clamp(52px, 4.5vw, 66px));
  padding: clamp(23px, 2.6vw, 38px);
  gap: clamp(13px, 1.25vw, 18px);
}

.ecosystem-greeting {
  display: grid;
  justify-items: center;
  gap: clamp(7px, .75vw, 10px);
  text-align: center;
}

.ecosystem-greeting small {
  color: #9b9ea4;
  font-size: clamp(.44rem, .48vw, .54rem);
  font-weight: 800;
  letter-spacing: .15em;
}

.ecosystem-greeting h3 {
  max-width: 720px;
  margin: 0;
  color: #1d1f23;
  font-size: clamp(1.5rem, 2.25vw, 2.45rem);
  line-height: 1.03;
  letter-spacing: -.052em;
}

.ecosystem-composer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: clamp(48px, 4.6vw, 62px);
  gap: 11px;
  padding: 7px 8px 7px clamp(12px, 1.25vw, 17px);
  border: 1px solid rgba(17,18,22,.1);
  border-radius: clamp(16px, 1.45vw, 21px);
  color: #878b92;
  font-size: clamp(.56rem, .68vw, .76rem);
  font-weight: 600;
  background: rgba(255,255,255,.9);
  box-shadow: 0 13px 34px rgba(17,18,22,.065), inset 0 1px 0 #fff;
}

.ecosystem-plus {
  color: #858990;
  font-size: 1.05rem;
  font-weight: 400;
}

.ecosystem-send {
  display: grid;
  width: clamp(33px, 3vw, 42px);
  height: clamp(33px, 3vw, 42px);
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: #17191d;
  box-shadow: 0 9px 22px rgba(17,18,22,.18);
}

.ecosystem-send svg {
  width: 44%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.ecosystem-connections {
  display: grid;
  grid-template-columns: minmax(150px, .72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: clamp(12px, 1.7vw, 25px);
  padding: clamp(12px, 1.2vw, 16px) 0;
  border-top: 1px solid rgba(17,18,22,.075);
  border-bottom: 1px solid rgba(17,18,22,.075);
}

.ecosystem-connections-copy {
  display: grid;
  gap: 4px;
}

.ecosystem-connections-copy strong {
  color: #383b41;
  font-size: clamp(.58rem, .68vw, .75rem);
}

.ecosystem-connections-copy small {
  color: #95989e;
  font-size: clamp(.47rem, .53vw, .58rem);
  line-height: 1.4;
}

.ecosystem-app-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(8px, .9vw, 13px);
  padding: 0;
  margin: 0;
  list-style: none;
}

.ecosystem-app-rail li {
  display: grid;
  justify-items: center;
  min-width: 0;
  gap: 5px;
}

.ecosystem-app-rail li small {
  overflow: hidden;
  width: 100%;
  color: #777b82;
  font-size: clamp(.42rem, .47vw, .52rem);
  font-weight: 700;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-icon {
  display: grid;
  width: clamp(33px, 3.1vw, 43px);
  height: clamp(33px, 3.1vw, 43px);
  place-items: center;
  border: 1px solid rgba(17,18,22,.075);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(17,18,22,.055);
}

.app-icon svg {
  width: 61%;
  height: 61%;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.app-calendar svg rect { fill: #4385f4; stroke: #4385f4; }
.app-calendar svg path { stroke: #fff; }
.app-calendar svg text { fill: #fff; stroke: none; font: 700 8px Inter, sans-serif; text-anchor: middle; }
.app-drive svg path:nth-child(1) { fill: #fbbc04; stroke: #fbbc04; }
.app-drive svg path:nth-child(2) { stroke: #34a853; }
.app-drive svg path:nth-child(3) { stroke: #4285f4; }
.app-excel svg rect { fill: #217346; stroke: #217346; }
.app-excel svg path { stroke: #fff; }
.app-quickbooks svg circle { fill: #2ca01c; stroke: #2ca01c; }
.app-quickbooks svg path { stroke: #fff; }
.app-slack svg { stroke: #5b5f67; }
.app-slack { background: #fbfbfb; }
.app-gmail svg rect { fill: #fff; stroke: #dadce0; }
.app-gmail svg path:first-of-type { stroke: #ea4335; stroke-width: 2.6; }
.app-gmail svg path:last-of-type { stroke: #4285f4; }

.ecosystem-integration {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(14px, 1.7vw, 24px);
  padding: clamp(12px, 1.3vw, 17px);
  border-radius: clamp(17px, 1.55vw, 22px);
  background: linear-gradient(115deg, rgba(238,240,244,.86), rgba(255,255,255,.9));
  box-shadow: inset 0 0 0 1px rgba(17,18,22,.065);
}

.ecosystem-integration-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(10px, 1.1vw, 14px);
}

.ecosystem-integration-copy > span:last-child {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.ecosystem-integration-copy strong {
  color: #292c31;
  font-size: clamp(.62rem, .76vw, .84rem);
  letter-spacing: -.015em;
}

.ecosystem-integration-copy small {
  color: #777b82;
  font-size: clamp(.49rem, .58vw, .64rem);
  line-height: 1.42;
}

.ecosystem-connect-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(36px, 3.4vw, 44px);
  padding: 0 clamp(14px, 1.35vw, 19px);
  border-radius: 999px;
  color: #fff;
  font-size: clamp(.52rem, .62vw, .69rem);
  font-weight: 800;
  background: #17191d;
  box-shadow: 0 10px 24px rgba(17,18,22,.17);
  white-space: nowrap;
}

.ecosystem-app-tablet .ecosystem-topbar {
  min-height: 54px;
  padding: 9px 12px;
}

.ecosystem-app-tablet .ecosystem-brand-mark {
  width: 30px;
  height: 30px;
}

.ecosystem-app-tablet .ecosystem-brand strong { font-size: .67rem; }
.ecosystem-app-tablet .ecosystem-brand small { font-size: .46rem; }
.ecosystem-app-tablet .ecosystem-status { padding: 6px 8px; font-size: .46rem; }

.ecosystem-content.compact {
  align-content: start;
  min-height: calc(100% - 54px);
  padding: clamp(18px, 2vw, 25px);
  gap: 13px;
}

.ecosystem-app-tablet .ecosystem-greeting {
  justify-items: start;
  text-align: left;
}

.ecosystem-app-tablet .ecosystem-greeting small { font-size: .43rem; }
.ecosystem-app-tablet .ecosystem-greeting h3 { max-width: 8.4em; font-size: clamp(1.12rem, 1.7vw, 1.52rem); }
.ecosystem-app-tablet .ecosystem-composer { min-height: 47px; font-size: .55rem; }
.ecosystem-app-tablet .ecosystem-send { width: 32px; height: 32px; border-radius: 11px; }

.ecosystem-app-rail.compact {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
}

.ecosystem-app-rail.compact .app-icon {
  width: clamp(30px, 2.9vw, 38px);
  height: clamp(30px, 2.9vw, 38px);
  border-radius: 11px;
}

.ecosystem-integration.compact {
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 12px;
}

.ecosystem-integration.compact .ecosystem-integration-copy { gap: 10px; }
.ecosystem-integration.compact .app-icon { width: 36px; height: 36px; }
.ecosystem-integration.compact .ecosystem-integration-copy strong { font-size: .67rem; }
.ecosystem-integration.compact .ecosystem-integration-copy small { font-size: .5rem; }
.ecosystem-integration.compact .ecosystem-connect-cta { min-height: 34px; width: 100%; font-size: .55rem; }

.ecosystem-app-mobile .ecosystem-topbar {
  min-height: 62px;
  padding: 17px 12px 10px;
}

.ecosystem-app-mobile .ecosystem-brand { gap: 7px; }
.ecosystem-app-mobile .ecosystem-brand-mark { width: 27px; height: 27px; border-radius: 9px; }
.ecosystem-app-mobile .ecosystem-brand strong { font-size: .57rem; }
.ecosystem-app-mobile .ecosystem-brand small { font-size: .41rem; }
.ecosystem-app-mobile .ecosystem-status { padding: 0; border: 0; background: transparent; }

.ecosystem-content.mobile {
  align-content: start;
  min-height: calc(100% - 62px);
  padding: 18px 11px 13px;
  gap: 11px;
}

.ecosystem-app-mobile .ecosystem-greeting {
  justify-items: start;
  gap: 6px;
  text-align: left;
}

.ecosystem-app-mobile .ecosystem-greeting small { font-size: .37rem; }
.ecosystem-app-mobile .ecosystem-greeting h3 { max-width: 8em; font-size: clamp(.95rem, 1.2vw, 1.12rem); line-height: 1.07; }

.ecosystem-composer.mobile {
  min-height: 42px;
  padding: 5px 5px 5px 10px;
  gap: 7px;
  border-radius: 14px;
  font-size: .5rem;
}

.ecosystem-composer.mobile .ecosystem-send { width: 31px; height: 31px; border-radius: 10px; }

.ecosystem-mobile-connected {
  display: grid;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid rgba(17,18,22,.07);
  border-bottom: 1px solid rgba(17,18,22,.07);
}

.ecosystem-mobile-connected > span {
  color: #858990;
  font-size: .45rem;
  font-weight: 800;
}

.ecosystem-app-mobile .ecosystem-app-rail.compact { gap: 6px; }
.ecosystem-app-mobile .ecosystem-app-rail.compact .app-icon { width: 29px; height: 29px; border-radius: 10px; }

.ecosystem-integration.mobile {
  grid-template-columns: 1fr;
  gap: 9px;
  padding: 10px;
  border-radius: 15px;
}

.ecosystem-integration.mobile .ecosystem-integration-copy { align-items: start; gap: 8px; }
.ecosystem-integration.mobile .app-icon { width: 32px; height: 32px; border-radius: 10px; }
.ecosystem-integration.mobile .ecosystem-integration-copy strong { font-size: .57rem; }
.ecosystem-integration.mobile .ecosystem-integration-copy small { font-size: .43rem; line-height: 1.35; }
.ecosystem-integration.mobile .ecosystem-connect-cta { width: 100%; min-height: 32px; font-size: .5rem; }

.ecosystem-stage-note {
  position: absolute;
  z-index: 8;
  right: 24px;
  bottom: clamp(23px, 2.6vw, 38px);
  left: 24px;
  margin: 0;
  color: rgba(255,255,255,.45);
  font-size: clamp(.62rem, .68vw, .75rem);
  line-height: 1.5;
  text-align: center;
}

.ecosystem-stage-note span {
  color: rgba(255,255,255,.82);
  font-weight: 800;
}

@media (max-width: 1180px) {
  .operating-ecosystem-shell { min-height: clamp(730px, 76vw, 860px); }
  .ecosystem-device-desktop { top: 94px; width: 74%; }
  .ecosystem-device-tablet { left: 18px; bottom: 105px; width: 35%; }
  .ecosystem-device-mobile { right: 20px; bottom: 84px; width: 20%; }
  .ecosystem-connections { grid-template-columns: 1fr; gap: 10px; }
  .ecosystem-connections-copy { display: none; }
}

@media (max-width: 920px) {
  .operating-ecosystem-shell { min-height: clamp(660px, 91vw, 780px); }
  .ecosystem-device-desktop { top: 88px; left: 45%; width: 76%; }
  .ecosystem-device-tablet { left: -8%; bottom: 95px; width: 43%; opacity: .82; }
  .ecosystem-device-mobile { right: 8px; bottom: 78px; width: 22%; }
  .ecosystem-app-desktop .ecosystem-connect-cta { display: none; }
  .ecosystem-app-desktop .ecosystem-app-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ecosystem-app-desktop .ecosystem-app-rail li:last-child { display: none; }
  .ecosystem-device-labels { top: 25px; }
  .ecosystem-greeting h3 { font-size: clamp(1.25rem, 3vw, 2rem); }
  .ecosystem-content { padding: clamp(18px, 2.8vw, 28px); }
  .ecosystem-integration-copy small { display: none; }
}

@media (min-width: 721px) and (max-width: 920px) {
  .ecosystem-app-mobile { aspect-ratio: 9 / 21.4; }
}

@media (max-width: 720px) {
  .operating-story-v45 {
    padding-top: 98px !important;
    padding-bottom: 158px !important;
  }

  .operating-story-v45 .operating-story-heading h2 {
    max-width: 620px;
    font-size: clamp(2.85rem, 12.6vw, 4rem);
    line-height: .95;
  }

  .operating-story-v45 .operating-story-copy {
    max-width: 520px;
    font-size: .96rem;
  }

  .operating-ecosystem-stage { margin-top: 46px; }

  .operating-ecosystem-shell {
    min-height: 720px;
    border-radius: 30px;
  }

  .ecosystem-grid { background-size: 48px 48px; }
  .ecosystem-floor { right: 0; left: 0; bottom: 8%; }
  .ecosystem-device-labels { top: 23px; gap: 9px; font-size: .5rem; }
  .ecosystem-device-labels i { width: 12px; }

  .ecosystem-device-desktop,
  .ecosystem-device-tablet { display: none; }

  .ecosystem-device-mobile {
    top: 68px;
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(68%, 280px);
    transform: translateX(-50%);
  }

  .ecosystem-app-mobile .ecosystem-greeting h3 { font-size: clamp(1.08rem, 4.8vw, 1.28rem); }
  .ecosystem-stage-note { bottom: 25px; font-size: .66rem; }
}

@media (max-width: 430px) {
  .operating-story-v45 .operating-story-heading h2 { font-size: clamp(2.25rem, 9.8vw, 2.65rem); }
  .operating-ecosystem-shell { min-height: 650px; border-radius: 27px; }
  .ecosystem-device-mobile { top: 66px; width: min(72%, 250px); }
  .ecosystem-stage-note { right: 18px; left: 18px; font-size: .61rem; }
}

@media (max-height: 760px) and (min-width: 921px) {
  .operating-story-v45 { padding-top: 92px !important; padding-bottom: 150px !important; }
  .operating-ecosystem-stage { margin-top: 48px; }
  .operating-ecosystem-shell { min-height: 690px; }
  .ecosystem-device-desktop { top: 76px; width: min(65%, 790px); }
  .ecosystem-device-tablet { bottom: 76px; width: min(31%, 370px); }
  .ecosystem-device-mobile { bottom: 64px; width: min(18%, 215px); }
}

@media (prefers-reduced-motion: reduce) {
  .operating-story-v45 .reveal,
  .operating-story-v45 .reveal.visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}