/* Scoped to the replacement panel; approved promotion copy and grid stay intact. */
.technology-action { --ta-accent: #79ddff; --ta-progress: 0%; position: relative; isolation: isolate; min-width: 0; width: 100%; padding: clamp(18px,2.2vw,28px); border: 1px solid #a7d3ff4d; border-radius: 16px; background: radial-gradient(ellipse at 85% 28%,#308baf24,transparent 65%),linear-gradient(145deg,#16365bd9,#081b37f0); box-shadow: 0 24px 64px #0003,inset 0 1px #d9f2ff14; transition: border-color .35s,background .35s; }
.technology-action[data-active='design'] { --ta-accent: #c3b5ff; background: radial-gradient(ellipse at 20% 45%,#8071bd35,transparent 68%),#102344ef; }
.technology-action[data-active='develop'] { --ta-accent: #7cebc7; background: radial-gradient(ellipse at 80% 60%,#25a99b28,transparent 68%),#0d263bef; }
.technology-action[data-active='deliver'] { --ta-accent: #ffc891; background: radial-gradient(ellipse at 65% 30%,#b7855427,transparent 68%),#10253fef; }
.technology-action .ta-kicker { display: flex; justify-content: space-between; align-items: center; margin: 0 0 12px; color: var(--ta-accent); font-size: .65rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.technology-action .ta-heading h3 { margin: 0 0 12px; max-width: 26ch; color: #f1f7ff; font: 500 clamp(1.4rem,2vw,2.05rem)/1.17 var(--display); letter-spacing: -.045em; text-wrap: balance; }
.technology-action .ta-heading > p:last-child { margin: 0; color: #bfcfe3; font-size: .8rem; line-height: 1.7; }
.ta-journey { position: relative; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 22px 0 18px; padding: 0; list-style: none; }
.ta-journey::before,.ta-journey::after { content: ''; position: absolute; top: 17px; left: 12%; width: 76%; height: 1px; background: #95bdda45; pointer-events: none; }
.ta-journey::after { width: calc(var(--ta-progress) * .76); background: var(--ta-accent); box-shadow: 0 0 12px var(--ta-accent); transition: width .45s,background .35s; }
.ta-journey li { min-width: 0; }
.ta-journey button { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; min-height: 64px; padding: 0 0 7px; border: 0; border-radius: 6px; background: transparent; color: #becfe2; font: 600 .7rem var(--body); cursor: pointer; transition: color .25s; }
.ta-journey button span { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid #749cbe66; border-radius: 50%; background: #102644; font-size: .64rem; letter-spacing: .05em; transition: border-color .25s,box-shadow .25s; }
.ta-journey button[aria-pressed='true'],.ta-journey button:hover { color: #fff; }
.ta-journey button[aria-pressed='true'] span { color: #10243e; border-color: var(--ta-accent); background: var(--ta-accent); box-shadow: 0 0 23px color-mix(in srgb,var(--ta-accent) 28%,transparent); }
.ta-journey button:focus-visible { outline: 2px solid var(--ta-accent); outline-offset: 4px; }
.ta-journey button:disabled { cursor: default; }
.ta-output { min-width: 0; }
.ta-output article + article { margin-top: 22px; }
.is-enhanced .ta-output article { margin: 0; }
.ta-canvas { position: relative; overflow: hidden; border: 1px solid #a4d7ff29; border-radius: 10px; background: radial-gradient(ellipse at 50% 50%,#28527644,transparent 70%),repeating-linear-gradient(0deg,transparent,transparent 24px,#9dd5ff06 25px),repeating-linear-gradient(90deg,transparent,transparent 24px,#9dd5ff06 25px),#071b32b3; }
.ta-canvas svg { display: block; width: 100%; height: auto; }
.ta-wires,.ta-wireframe { fill: none; stroke: var(--ta-accent); stroke-width: 1.3; }
.ta-wires { stroke-opacity: .6; }.ta-nodes { fill: #142d48; stroke: var(--ta-accent); stroke-width: 1; }.ta-labels { fill: #c8e3f5; font: 9px monospace; letter-spacing: 1.3px; }.ta-code { fill: var(--ta-accent); font: 10px monospace; }
.ta-visual-note { display: block; padding: 8px 12px; border-top: 1px solid #a4d7ff1c; color: var(--ta-accent); font: 500 .6rem/1.4 var(--body); letter-spacing: .09em; text-transform: uppercase; }
.technology-action .ta-output h4 { margin: 16px 0 7px; color: #e9f6ff; font: 600 1rem/1.4 var(--display); letter-spacing: -.015em; }
.technology-action .ta-output p { margin: 0; min-height: 4.8em; color: #bfcfe3; font-size: .79rem; line-height: 1.65; }
@media (max-width:440px) { .ta-journey { grid-template-columns: 1fr; gap: 0; margin-block: 18px; }.ta-journey::before,.ta-journey::after { left: 17px; top: 17px; width: 1px; height: calc(100% - 34px); }.ta-journey::after { height: calc(var(--ta-progress) * .85); }.ta-journey button { flex-direction: row; gap: 14px; min-height: 48px; padding: 5px 0; text-align: left; }.ta-journey button span { flex-shrink: 0; }.technology-action .ta-heading h3 { font-size: 1.55rem; }.ta-output p { min-height: 0; } }
@media (prefers-reduced-motion:reduce) { .technology-action,.technology-action *,.technology-action *::before,.technology-action *::after { animation: none !important; transition: none !important; scroll-behavior: auto; } }