/* Station 1 — calm comparison flow and concise concept blocks. */
.transform-screen {
  padding-block: var(--s-5) var(--s-8);
}
.transform-header {
  margin-block-end: var(--s-5);
}
.transform-header h1 {
  margin-block-end: var(--s-3);
}
.transform-lead {
  margin-block-end: 0;
}
.transform-comparison {
  margin-block-end: var(--s-7);
}
.transform-prompt {
  max-width: var(--reading-max);
  margin-block-end: var(--s-4);
  color: var(--ink-2);
}
.transform-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  max-width: 100%;
  min-height: 60px;
  margin-block-end: var(--s-2);
  padding: var(--s-1);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
}
.transform-toggle-option {
  min-height: 52px;
  padding: var(--s-2) var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  background: transparent;
  font-size: var(--fs-btn);
  font-weight: var(--fw-medium);
  transition: transform var(--dur-fast) var(--ease-out);
}
.transform-toggle-option:hover {
  background: var(--surface-tint);
}
.transform-toggle-option.is-selected {
  color: var(--ink-inverse);
  background: var(--teal-700);
}
.transform-stamp-hint {
  margin-block: 0 var(--s-3);
  color: var(--ink-3);
  font-size: var(--fs-small);
}
.transform-panel {
  position: relative;
  padding: var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.transform-panel.is-paper {
  background: var(--surface);
}
.transform-panel.is-digital {
  background: var(--surface-tint);
}
.transform-caption {
  display: table;
  width: fit-content;
  margin-block-end: var(--s-5);
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  color: var(--ink-3);
  background: var(--bg);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
}
.transform-panel.is-digital .transform-caption {
  border-color: var(--teal-700);
  color: var(--teal-700);
  background: var(--surface);
}
.transform-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-7);
  isolation: isolate;
}
.transform-connector {
  position: absolute;
  z-index: 0;
  inset-inline: 12%;
  inset-block: 0;
  width: auto;
  height: 100%;
  overflow: visible;
}
.transform-connector.is-vertical {
  display: none;
}
.transform-connector path {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  transition: opacity var(--dur-slow) var(--ease-in-out);
}
.transform-connector .connector-paper {
  stroke-dasharray: 6 6;
}
.transform-connector .connector-digital {
  stroke: var(--cyan-400);
  stroke-width: 3;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition:
    opacity var(--dur-slow) var(--ease-in-out),
    stroke-dashoffset calc(var(--dur-slow) + var(--dur-fast)) var(--ease-in-out);
}
.transform-connector .connector-dot {
  fill: var(--cyan-400);
  stroke: var(--surface);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-in-out);
}
.transform-panel.is-digital .connector-paper {
  opacity: 0;
}
.transform-panel.is-digital .connector-digital,
.transform-panel.is-digital .connector-dot {
  opacity: 1;
}
.transform-panel.is-digital .connector-digital {
  stroke-dashoffset: 0;
}
.transform-step {
  position: relative;
  z-index: 1;
  isolation: isolate;
  min-width: 0;
  min-height: 14rem;
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-gold);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-slow) var(--ease-in-out);
}
.transform-step::before {
  position: absolute;
  z-index: -1;
  inset-block: 4px -4px;
  inset-inline: 4px -4px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  content: "";
  background: transparent;
  transition: opacity var(--dur-slow) var(--ease-in-out);
}
.transform-panel.is-digital .transform-step::before {
  opacity: 0;
}
.transform-step:nth-of-type(1) {
  align-self: start;
  min-height: 13rem;
  transform: rotate(-1.2deg) translateY(6px);
  transition-delay: 0ms;
}
.transform-step:nth-of-type(2) {
  align-self: start;
  min-height: 15rem;
  transform: rotate(0.8deg) translateY(-5px);
  transition-delay: 60ms;
}
.transform-step:nth-of-type(3) {
  align-self: start;
  min-height: 13.5rem;
  transform: rotate(-0.6deg) translateY(4px);
  transition-delay: 120ms;
}
.transform-panel.is-digital .transform-step {
  align-self: stretch;
  min-height: 15rem;
  transform: rotate(0) translateY(0);
  border-block-start: 3px solid var(--teal-700);
  background: var(--surface);
}
.transform-panel.is-digital .transform-step:nth-of-type(1) {
  transition-delay: 0ms;
}
.transform-panel.is-digital .transform-step:nth-of-type(2) {
  transition-delay: 60ms;
}
.transform-panel.is-digital .transform-step:nth-of-type(3) {
  transition-delay: 120ms;
}
.transform-step-content {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.transform-step-content.is-changing {
  opacity: 0;
  transform: translateY(5px);
}
.transform-node {
  display: none;
}
.transform-panel.is-digital .transform-node {
  position: absolute;
  z-index: 1;
  inset-block-start: 50%;
  inset-inline-start: -0.3rem;
  display: block;
  width: 0.55rem;
  height: 0.55rem;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--teal-700);
  transform: translateY(-50%);
}
.transform-repeat {
  display: none;
}
.transform-panel.is-paper .transform-repeat {
  position: absolute;
  z-index: 1;
  inset-block-start: 50%;
  inset-inline-end: 32%;
  display: block;
  color: var(--ink-3);
  font-size: var(--fs-h3);
  line-height: 1;
}
.transform-step-icon,
.transform-field-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-block-end: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--ink-3);
  background: var(--bg);
}
.transform-field-icon {
  color: var(--teal-700);
}
.transform-panel.is-digital .transform-step-icon {
  border-color: transparent;
  border-radius: 50%;
  color: var(--teal-700);
  background: var(--surface-tint);
}
.transform-step-icon svg,
.transform-field-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}
.transform-step h3 {
  margin-block-end: var(--s-2);
  font-size: var(--fs-body);
}
.transform-step p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--fs-small);
  line-height: 1.65;
}
.transform-insight {
  max-width: var(--reading-max);
  margin-block: var(--s-4) 0;
  padding-inline-start: var(--s-4);
  border-inline-start: 3px solid var(--teal-700);
  color: var(--teal-700);
  font-weight: var(--fw-bold);
}
.insight-enter {
  animation: transform-insight-enter var(--dur-base) var(--ease-out) both;
}
@keyframes transform-insight-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.transform-quote-card {
  margin-block-end: var(--s-7);
  padding: var(--s-6) var(--s-7);
}
.transform-quote-mark {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  color: var(--gold-400);
  background: var(--surface-gold);
  border-radius: var(--r-pill);
  margin-block-end: var(--s-3);
}
.transform-quote-mark svg {
  inline-size: 28px;
  block-size: 28px;
}
.transform-quote-card blockquote {
  max-width: 58rem;
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1.65;
}
.transform-quote-note {
  margin: var(--s-3) 0 0;
  color: var(--ink-2);
  font-size: var(--fs-small);
}
.transform-concepts {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--s-5);
  margin-block-end: var(--s-7);
}
.transform-definition h2,
.transform-questions h2,
.transform-egypt-card h2 {
  margin-block-end: var(--s-3);
  font-size: var(--fs-h3);
}
.transform-definition p,
.transform-egypt-card p {
  margin: 0;
  color: var(--ink-2);
}
.transform-questions ol {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.transform-questions li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}
.transform-question-number {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  border-radius: 50%;
  color: var(--ink-inverse);
  background: var(--teal-700);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: 1;
}
.transform-ux {
  margin-block-end: var(--s-7);
}
.transform-ux h2 {
  margin-block-end: var(--s-2);
}
.transform-section-lead {
  max-width: var(--reading-max);
  margin-block-end: var(--s-4);
  color: var(--ink-2);
}
.transform-ux-hint {
  margin: 0 0 var(--s-4);
  color: var(--ink-3);
  font-size: var(--fs-small);
}
.transform-ux-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.transform-ux-item {
  min-width: 0;
}
.transform-ux-chip {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 3.25rem;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--ink-2);
  background: var(--surface);
  font-size: var(--fs-small);
  text-align: start;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.transform-ux-chip:hover,
.transform-ux-chip:focus-visible {
  border-color: var(--teal-700);
  background: var(--surface-tint);
  transform: translateY(-2px);
}
.transform-ux-chip[aria-expanded="true"] {
  border-color: var(--teal-700);
  color: var(--ink);
  background: var(--surface-tint);
}
.transform-ux-icon {
  display: grid;
  place-items: center;
  flex: none;
}
.transform-ux-icon svg {
  width: 1.35rem;
  height: 1.35rem;
  color: var(--teal-700);
}
.transform-ux-text {
  flex: 1;
}
.transform-ux-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.transform-ux-panel > div {
  overflow: hidden;
}
.transform-ux-panel p {
  margin: 0;
  padding: var(--s-3) var(--s-4) 0;
  color: var(--ink-2);
  font-size: var(--fs-small);
  line-height: 1.6;
}
.transform-ux-item.is-open .transform-ux-panel {
  grid-template-rows: 1fr;
}

/* ---- UX chip icon micro-animations: hover/focus only, transform+opacity+
   stroke-dashoffset, bounded by --dur-* (collapses to 0 with motion off). ---- */
.transform-ux-chip .ux-icon-tag {
  transform-box: fill-box;
  transform-origin: 32% 28%;
  transition: transform var(--dur-slow) var(--ease-in-out);
}
.transform-ux-chip:hover .ux-icon-tag,
.transform-ux-chip:focus-visible .ux-icon-tag {
  transform: rotate(12deg);
}
.ux-search-pulse {
  fill: none;
  opacity: 0.45;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform var(--dur-slow) var(--ease-out),
    opacity var(--dur-slow) var(--ease-out);
}
.transform-ux-chip:hover .ux-search-pulse,
.transform-ux-chip:focus-visible .ux-search-pulse {
  transform: scale(1.5);
  opacity: 0;
}
.ux-layer {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--dur-slow) var(--ease-out);
}
.transform-ux-chip:hover .ux-layer-1,
.transform-ux-chip:focus-visible .ux-layer-1 {
  transform: translateY(-2px);
}
.transform-ux-chip:hover .ux-layer-3,
.transform-ux-chip:focus-visible .ux-layer-3 {
  transform: translateY(2px);
}
.ux-btn-shape {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--dur-fast) var(--ease-out);
}
.transform-ux-chip:hover .ux-btn-shape,
.transform-ux-chip:focus-visible .ux-btn-shape {
  transform: scaleY(0.72);
}
.ux-blade {
  transform-box: fill-box;
  transform-origin: 31% 50%;
  transition: transform var(--dur-slow) var(--ease-in-out);
}
.transform-ux-chip:hover .ux-blade-a,
.transform-ux-chip:focus-visible .ux-blade-a {
  transform: rotate(10deg);
}
.transform-ux-chip:hover .ux-blade-b,
.transform-ux-chip:focus-visible .ux-blade-b {
  transform: rotate(-10deg);
}
.ux-bulb-ring {
  fill: none;
  stroke-dasharray: 57;
  stroke-dashoffset: 57;
  opacity: 0;
  transition:
    stroke-dashoffset var(--dur-slow) var(--ease-out),
    opacity var(--dur-slow) var(--ease-out);
}
.transform-ux-chip:hover .ux-bulb-ring,
.transform-ux-chip:focus-visible .ux-bulb-ring {
  stroke-dashoffset: 0;
  opacity: 1;
}
.ux-chat-dot {
  fill: currentColor;
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out);
}
.transform-ux-chip:hover .ux-chat-dot-1,
.transform-ux-chip:focus-visible .ux-chat-dot-1 {
  transform: translateY(-2.5px);
}
.transform-ux-chip:hover .ux-chat-dot-2,
.transform-ux-chip:focus-visible .ux-chat-dot-2 {
  transform: translateY(-2.5px);
  transition-delay: 70ms;
}
.transform-ux-chip:hover .ux-chat-dot-3,
.transform-ux-chip:focus-visible .ux-chat-dot-3 {
  transform: translateY(-2.5px);
  transition-delay: 140ms;
}
.ux-device-phone {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--dur-slow) var(--ease-out);
}
.transform-ux-chip:hover .ux-device-phone,
.transform-ux-chip:focus-visible .ux-device-phone {
  transform: translate(-3px, 3px) scale(1.06);
}
.ux-icon-arrow {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out);
}
.transform-ux-chip:hover .ux-icon-arrow,
.transform-ux-chip:focus-visible .ux-icon-arrow {
  transform: translateX(-4px);
}
.transform-egypt {
  margin-block-end: var(--s-7);
}
.transform-egypt-card {
  position: relative;
  overflow: hidden;
  margin-block-end: var(--s-4);
  padding-inline-start: var(--s-7);
}
.transform-egypt-card::before {
  position: absolute;
  inset-inline-start: 0;
  inset-block: var(--s-5);
  width: 0.35rem;
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  content: "";
  background: linear-gradient(180deg, var(--teal-700), var(--cyan-400));
}
.transform-fields-lead {
  margin-block-end: var(--s-3);
}
.transform-fields-hint {
  margin: 0 0 var(--s-3);
  color: var(--ink-3);
  font-size: var(--fs-small);
}
.transform-field-tiles {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--s-3);
}
.transform-field-tile {
  min-height: 8.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink);
  text-align: inherit;
  perspective: 800px;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.transform-field-tiles.is-visible .transform-field-tile {
  opacity: 1;
  transform: translateY(0);
}
.transform-field-tiles.is-visible .transform-field-tile:nth-child(1) {
  transition-delay: 0ms;
}
.transform-field-tiles.is-visible .transform-field-tile:nth-child(2) {
  transition-delay: 60ms;
}
.transform-field-tiles.is-visible .transform-field-tile:nth-child(3) {
  transition-delay: 120ms;
}
.transform-field-tiles.is-visible .transform-field-tile:nth-child(4) {
  transition-delay: 180ms;
}
.transform-field-tiles.is-visible .transform-field-tile:nth-child(5) {
  transition-delay: 240ms;
}
.transform-field-tiles.is-visible .transform-field-tile:nth-child(6) {
  transition-delay: 300ms;
}
.transform-field-tiles.is-visible .transform-field-tile:nth-child(7) {
  transition-delay: 360ms;
}
.transform-field-inner {
  position: relative;
  display: block;
  min-height: 8.5rem;
  transition: transform var(--dur-slow) var(--ease-in-out);
  transform-style: preserve-3d;
}
.transform-field-tile.is-flipped .transform-field-inner {
  transform: rotateY(180deg);
}
.transform-field-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: var(--s-2);
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  backface-visibility: hidden;
  text-align: center;
}
.transform-field-front {
  justify-items: center;
  font-weight: var(--fw-medium);
}
.transform-field-back {
  display: grid;
  justify-items: center;
  gap: var(--s-1);
  transform: rotateY(180deg);
  font-size: var(--fs-small);
}
.transform-field-back-title {
  color: var(--ink);
  font-weight: var(--fw-bold);
}
.transform-field-back-example {
  color: var(--ink-2);
}
.transform-field-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-block-end: var(--s-1);
  color: var(--teal-700);
}
.transform-field-icon svg {
  width: 100%;
  height: 100%;
}
/* Sector icon micro-animations on hover/focus/flip — transform, opacity and
   stroke-dashoffset only, each a single bounded move (no loops). */
.field-cap {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--dur-slow) var(--ease-out);
}
.transform-field-tile:hover .field-cap,
.transform-field-tile:focus-visible .field-cap,
.transform-field-tile.is-flipped .field-cap {
  transform: translateY(-3px);
}
.field-coin {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: translateY(3px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}
.transform-field-tile:hover .field-coin,
.transform-field-tile:focus-visible .field-coin,
.transform-field-tile.is-flipped .field-coin {
  opacity: 1;
  transform: translateY(0);
}
.transform-field-tile:hover .field-coin-1,
.transform-field-tile:focus-visible .field-coin-1,
.transform-field-tile.is-flipped .field-coin-1 {
  transition-delay: 0ms;
}
.transform-field-tile:hover .field-coin-2,
.transform-field-tile:focus-visible .field-coin-2,
.transform-field-tile.is-flipped .field-coin-2 {
  transition-delay: 80ms;
}
.transform-field-tile:hover .field-coin-3,
.transform-field-tile:focus-visible .field-coin-3,
.transform-field-tile.is-flipped .field-coin-3 {
  transition-delay: 160ms;
}
.field-cross {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out);
}
.transform-field-tile:hover .field-cross,
.transform-field-tile:focus-visible .field-cross,
.transform-field-tile.is-flipped .field-cross {
  transform: scale(1.3);
}
.field-windows {
  opacity: 0;
  color: var(--teal-700);
  transition: opacity var(--dur-base) var(--ease-out);
}
.transform-field-tile:hover .field-windows,
.transform-field-tile:focus-visible .field-windows,
.transform-field-tile.is-flipped .field-windows {
  opacity: 1;
}
.field-store {
  transform-box: fill-box;
  transform-origin: 30% 70%;
  transition: transform var(--dur-slow) var(--ease-out);
}
.transform-field-tile:hover .field-store,
.transform-field-tile:focus-visible .field-store,
.transform-field-tile.is-flipped .field-store {
  transform: translateX(2px) rotate(6deg);
}
.field-bus {
  transform-box: fill-box;
  transition: transform var(--dur-slow) var(--ease-out);
}
.transform-field-tile:hover .field-bus,
.transform-field-tile:focus-visible .field-bus,
.transform-field-tile.is-flipped .field-bus {
  transform: translateX(3px);
}
.field-arc {
  transition: stroke-dashoffset var(--dur-base) var(--ease-out);
}
.transform-field-tile:hover .field-arc-1,
.transform-field-tile:focus-visible .field-arc-1,
.transform-field-tile.is-flipped .field-arc-1 {
  stroke-dashoffset: 0;
}
.transform-field-tile:hover .field-arc-2,
.transform-field-tile:focus-visible .field-arc-2,
.transform-field-tile.is-flipped .field-arc-2 {
  stroke-dashoffset: 0;
  transition-delay: 90ms;
}
.transform-field-tile:hover .field-arc-3,
.transform-field-tile:focus-visible .field-arc-3,
.transform-field-tile.is-flipped .field-arc-3 {
  stroke-dashoffset: 0;
  transition-delay: 180ms;
}
@media (prefers-reduced-motion: reduce) {
  .transform-field-inner {
    transform: none !important;
  }
  .transform-field-back {
    opacity: 0;
    transform: none;
  }
  .transform-field-tile.is-flipped .transform-field-front {
    opacity: 0;
  }
  .transform-field-tile.is-flipped .transform-field-back {
    opacity: 1;
  }
}
html.motion-off .transform-field-inner {
  transform: none !important;
}
html.motion-off .transform-field-back {
  opacity: 0;
  transform: none;
}
html.motion-off .transform-field-tile.is-flipped .transform-field-front {
  opacity: 0;
}
html.motion-off .transform-field-tile.is-flipped .transform-field-back {
  opacity: 1;
}
html.motion-off .transform-field-tile {
  opacity: 1;
  transform: none;
}
.transform-video {
  margin-block-end: var(--s-5);
}
html.motion-off .insight-enter {
  animation: none;
}
html.motion-off .transform-step,
html.motion-off .transform-step::before,
html.motion-off .transform-step-content,
html.motion-off .transform-connector path,
html.motion-off .transform-connector .connector-dot {
  transition-duration: 0ms;
  transition-delay: 0ms;
}
@media (max-width: 1024px) {
  .transform-concepts {
    grid-template-columns: minmax(0, 1fr);
  }
  .transform-field-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .transform-screen {
    padding-block-start: var(--s-5);
  }
  .transform-header,
  .transform-comparison,
  .transform-quote-card,
  .transform-concepts,
  .transform-ux,
  .transform-egypt {
    margin-block-end: var(--s-6);
  }
  .transform-toggle {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: var(--r-md);
  }
  .transform-toggle-option {
    min-height: 52px;
    padding-inline: var(--s-2);
    border-radius: var(--r-sm);
    line-height: 1.35;
  }
  .transform-panel {
    padding: var(--s-4);
  }
  .transform-flow {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-5);
  }
  .transform-connector {
    inset-inline-start: var(--s-3);
    inset-inline-end: auto;
    inset-block: 0;
    width: 1.25rem;
    height: 100%;
  }
  .transform-connector.is-horizontal {
    display: none;
  }
  .transform-connector.is-vertical {
    display: none;
  }
  .transform-panel.is-paper .transform-repeat {
    inset-inline-start: 2.5rem;
    inset-inline-end: auto;
    inset-block-start: 67%;
  }
  .transform-panel.is-digital .transform-node {
    inset-inline-start: 1rem;
  }
  .transform-panel.is-digital .transform-step {
    min-height: 12.5rem;
  }
  .transform-step {
    min-height: 0;
    padding: var(--s-4);
  }
  .transform-step:nth-of-type(-n + 2)::after {
    position: absolute;
    z-index: 2;
    inset-block-start: 100%;
    inset-inline-start: calc(1rem + 0.25rem);
    width: 0;
    height: var(--s-5);
    border-inline-start: 2px dashed var(--border-strong);
    content: "";
    transition:
      border-color var(--dur-slow) var(--ease-in-out),
      border-width var(--dur-slow) var(--ease-in-out);
  }
  .transform-panel.is-digital .transform-step:nth-of-type(-n + 2)::after {
    border-color: var(--cyan-400);
    border-style: solid;
    border-inline-start-width: 3px;
  }
  .transform-step-icon {
    width: 2.4rem;
    height: 2.4rem;
  }
  .transform-quote-card {
    padding: var(--s-5);
  }
  .transform-ux-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-2);
  }
  .transform-ux-chip {
    align-items: flex-start;
    min-height: 4rem;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-md);
    line-height: 1.45;
  }
  .transform-field-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .transform-field-tile:last-child {
    grid-column: 1 / -1;
  }
}