/* Wrapper */
    team-plans {
      display: block;
      align-self: center;
      max-width: 1100px;
      margin-block: 18px 40px;
      padding-inline: 5vw;
      padding-bottom: 32px;
      width: 100vw;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    /* Table card */
    plan-table {
      display: block;
      overflow: clip;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      min-width: 600px;
    }

    /* 5 columns: elements | price | users | loc | buy */
    plan-row {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr .5fr;
      align-items: start;
      border-bottom: 1px solid var(--line);
    }

    /* Header */
    plan-row.head {
      top: 56px;
      z-index: 10;
      background: var(--soft-bg) !important;
      border-bottom: 1px solid var(--line);
      border-radius: var(--radius) var(--radius) 0 0;
    }

    .small-only,
    .small-only-1,
    .small-only-2,
    .small-only-3 {
      display: none !important;
    }

    col-title {
      display: block;
      padding: 14px 16px;
      font-size: 13px;
      font-weight: 700;
      color: #66749a;
      text-transform: uppercase;
      letter-spacing: .55px;
      position: relative;
    }

    tool-tip {
      position: fixed;
      /* floats relative to the viewport */
      z-index: 99999;
      max-width: 260px;
      padding: 8px;
      border-radius: 6px;
      background: var(--info-bg-color);
      color: #fff;
      box-shadow: var(--shadow);
      text-align: center;
      font-size: 14px;
      line-height: 1.3;
      pointer-events: none;
      opacity: 0;
      transition: opacity .15s ease-in-out, transform .15s ease-in-out;
    }

    tool-tip.visible {
      opacity: 1;
    }

    tool-tip.top {
      transform: translateY(-8px);
    }

    tool-tip.bottom {
      transform: translateY(8px);
    }

    plan-row hover-link {
      color: #66749a;
    }

    hover-link {
      cursor: pointer;
      position: relative;
    }

    hover-link:after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 1px;
      border-bottom: #66749a 2px dotted;
      width: 100%;
      height: 2px;
    }

    col-title.small,
    col-title small {
      font-weight: 600;
      opacity: .95
    }

    /* Body cells */
    elements,
    monthly-price,
    recommended-users,
    loc-estimate {
      display: block;
      padding: 14px 16px;
      font-size: max(1.5vmin, 18px);
    }

    /* Zebra + hover */
    plan-body plan-row:nth-child(odd) {
      background: var(--row);
    }

    plan-body plan-row:nth-child(even) {
      background: var(--row-alt);
    }

    plan-body plan-row:hover {
      background: var(--row-hover);
    }

    plan-body plan-row:last-child {
      border-radius: 0 0 var(--radius) var(--radius);
    }

    /* Number alignment */
    monthly-price,
    recommended-users,
    loc-estimate {
      text-align: left;
      font-variant-numeric: tabular-nums;
    }

    monthly-price {
      font-weight: 700;
    }

    /* Buy button */
    actions {
      display: flex;
      text-align: right;
      height: 100%;
      align-items: center;
      justify-content: flex-end;
      padding-inline: 8px;
    }

    .buy-btn {
      appearance: none;
      border: 1px solid var(--main);
      background: var(--main);
      color: var(--main-ink);
      padding: 10px 14px;
      font-weight: 600;
      font-size: 14px;
      border-radius: 999px;
      cursor: pointer;
      white-space: nowrap;
      box-shadow: 0 4px 10px rgba(53, 67, 197, .18);
      transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
    }

    .buy-btn:hover {
      box-shadow: var(--shadow-strong);
      transform: translateY(-1px);
    }

    .buy-btn:active {
      transform: translateY(0);
    }

    .buy-btn.secondary {
      background: transparent;
      color: var(--main);
      border: 1px solid var(--main);
    }

    i {
      position: absolute;
      top: 12px;
      padding-left: 2px !important;
      text-decoration: none !important;
    }

    /* Small screens -> card-ish layout */
    /* @media (max-width: 760px) {
      plan-row {
        grid-template-columns: 1fr 1fr;
      }

      plan-head plan-row {
        grid-template-columns: 1fr 1fr;
      }

      plan-head col-title:nth-child(3),
      plan-head col-title:nth-child(4),
      plan-head col-title.buy-col {
        display: none;
      }

      elements {
        padding-top: 16px;
        font-weight: 700;
      }

      actions {
        grid-column: 1 / -1;
        align-items: center;
        justify-content: center;
      }

      elements::before,
      monthly-price::before,
      recommended-users::before,
      loc-estimate::before {
        display: block;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .5px;
        color: #7a879f;
        margin-bottom: 4px;
      }

      elements::before {
        content: "Diagram Elements";
      }

      monthly-price::before {
        content: "$/Month";
      }

      recommended-users::before {
        content: "Recommended Users";
      }

      loc-estimate::before {
        content: "Lines of Code (Est.)";
      }
    } */