.tt-plan-icon {
  --tt-plan-ink: #26333b;
  --tt-plan-signal: #318bb9;
  --tt-plan-muted: #a6b4bc;
  --tt-plan-surface: #ffffff;
  width: 54px;
  height: 54px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--tt-plan-ink);
  isolation: isolate;
}

.tt-plan-icon svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  shape-rendering: geometricPrecision;
}

.tt-plan-icon__pin,
.tt-plan-icon__staff,
.tt-plan-icon__connection,
.tt-plan-icon__node {
  vector-effect: non-scaling-stroke;
}

.tt-plan-icon__pin {
  fill: var(--tt-plan-surface);
  stroke: var(--tt-plan-ink);
  stroke-width: 2.7;
  stroke-linejoin: round;
}

.tt-plan-icon__pin-core,
.tt-plan-icon__hub {
  fill: var(--tt-plan-signal);
}

.tt-plan-icon__staff {
  fill: none;
  stroke: var(--tt-plan-ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tt-plan-icon__staff-head { fill: var(--tt-plan-signal); }

.tt-plan-icon__connection {
  fill: none;
  stroke: var(--tt-plan-muted);
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.tt-plan-icon__node {
  fill: var(--tt-plan-surface);
  stroke: var(--tt-plan-ink);
  stroke-width: 2.2;
}

.tt-plan-icon__node-core { fill: var(--tt-plan-signal); }

.tt-plan-icon--summary { width: 42px; height: 42px; }
.tt-plan-icon--table { width: 34px; height: 34px; margin: 0 auto 7px; }
.tt-plan-icon--compact { width: 44px; height: 44px; }
.tt-plan-icon--subscription { width: 46px; height: 46px; }
.tt-plan-icon--hero { width: clamp(64px, 8vw, 86px); height: clamp(64px, 8vw, 86px); }

html[data-theme="dark"] .tt-plan-icon {
  --tt-plan-ink: #eef2f4;
  --tt-plan-signal: #72bfe5;
  --tt-plan-muted: #687780;
  --tt-plan-surface: #171d21;
}

@media (hover: hover) and (pointer: fine) {
  :is(.price-card, .pricing-page-card, .ob-card, .tt-plan-card, .tt-subscription-product, .home-enterprise-link, .pricing-enterprise-band, .ob-enterprise-link):hover .tt-plan-icon__connection {
    stroke-dasharray: 90;
    animation: tt-plan-draw .42s ease-out both;
  }

  :is(.price-card, .pricing-page-card, .ob-card, .tt-plan-card, .tt-subscription-product, .home-enterprise-link, .pricing-enterprise-band, .ob-enterprise-link):hover .tt-plan-icon__pin-core,
  :is(.price-card, .pricing-page-card, .ob-card, .tt-plan-card, .tt-subscription-product, .home-enterprise-link, .pricing-enterprise-band, .ob-enterprise-link):hover .tt-plan-icon__hub {
    animation: tt-plan-confirm .32s ease-out both;
  }
}

@keyframes tt-plan-draw {
  from { stroke-dashoffset: 90; }
  to { stroke-dashoffset: 0; }
}

@keyframes tt-plan-confirm {
  from { opacity: .35; transform: scale(.72); }
  to { opacity: 1; transform: scale(1); }
}

.tt-plan-icon__pin-core,
.tt-plan-icon__hub {
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
  .tt-plan-icon * { animation: none !important; }
}