/* ============================================================
   KEEYNET dashboard — Subscription page
   ------------------------------------------------------------
   Concept B's opening band over concept D's ledger.

   What the page was: three numbered sections — "01 · ACCOUNT
   IDENTITY", "02 · SUBSCRIPTIONS", "03 · PLAN CAPABILITIES" —
   titled "Account Overview" even though the nav calls it
   Subscriptions. A quarter of it showed a name, an email and
   four tinted meta tiles, two of which read "—" and
   "Authenticated". It never showed a price, and never showed
   what upgrading would get you.

   What it is now:

     BAND     the plan, stated. On Free it carries the pitch and
              the four things that make Free worth having; on a
              paid plan it collapses to a plain summary, because
              a sales pitch aimed at someone who already bought
              is just noise.
     LEDGER   app.js already renders the entitlement catalogue
              into #plan-services-list, grouped by the plan that
              unlocks each feature. That markup is kept and
              restyled from cards into rows, with filter tabs
              added above it.
     PLANS    the three priced columns open in a dialog from
              "See plans" — they are a destination, not the
              page.

   Nothing here renders data. Every value still comes from
   app.js writing to its own element ids; plan-page.js only
   moves those elements into the new shape.

   Written in the existing design tokens, so Green / Black /
   Dull White all follow. Scoped to #plan.

   To remove: delete the <link> and <script> tags.
   ============================================================ */


/* ---------- page frame ----------------------------------------- */

#plan .workspace-heading {
  align-items: flex-start !important;
  padding-bottom: 16px !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--line) !important;
}

#plan .workspace-heading > div:first-child {
  align-items: flex-start !important;
  text-align: left !important;
}

#plan .plan-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: none !important;
}

#plan .account-select-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--subtle) !important;
}

#plan #plan-account-select {
  height: 32px !important;
  min-width: 170px !important;
  padding: 0 10px !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: var(--surface) !important;
  font-size: 12.5px !important;
}

#plan #plan-refresh-button {
  height: 32px !important;
  padding: 0 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: var(--surface) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
}

/* The three "01 · " / "02 · " / "03 · " section headers and the
   containers the band and ledger replaced. Their data-carrying
   children were moved out first, so this only drops chrome. */
#plan .kp-retired {
  display: none !important;
}


/* ---------- the band -------------------------------------------- */

#plan .kp-band {
  box-sizing: border-box;
  margin: 16px 0 0;
  padding: 24px 24px 22px;

  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--card-shadow);
}

#plan .kp-band-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

#plan .kp-band-lead {
  flex: 1 1 520px;
  min-width: 0;
}

#plan .kp-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--subtle);
}

/* app.js writes the raw status word here. */
#plan .kp-band #plan-page-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;

  padding: 3px 9px !important;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent) !important;
  border-radius: 999px !important;
  background: var(--accent-soft) !important;

  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--success) !important;
}

#plan .kp-band #plan-page-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

#plan .kp-pitch {
  margin: 11px 0 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.14;
}

#plan .kp-pitch-sub {
  margin: 9px 0 0;
  max-width: 62ch;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* Compact mode: a paid account does not need the pitch. */
#plan .kp-band.is-compact .kp-pitch,
#plan .kp-band.is-compact .kp-pitch-sub,
#plan .kp-band.is-compact .kp-pillars {
  display: none;
}

#plan .kp-band.is-compact {
  padding-bottom: 20px;
}

#plan .kp-plan-name {
  margin: 10px 0 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.1;
}

#plan .kp-band:not(.is-compact) .kp-plan-name {
  display: none;
}

#plan .kp-band:not(.is-compact) #plan-page-description {
  display: none !important;
}

#plan .kp-band.is-compact #plan-page-description {
  display: block !important;
  margin: 8px 0 0 !important;
  max-width: 68ch !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: var(--muted) !important;
}

/* the device readout */
#plan .kp-devices {
  flex: 0 1 230px;
  min-width: 0;
  box-sizing: border-box;

  padding: 17px 19px;
  border: 1px solid var(--line-soft);
  border-radius: 13px;
  background: var(--surface-soft);

  display: flex;
  flex-direction: column;
  gap: 12px;
}

#plan .kp-devices-label {
  font-size: 11px;
  color: var(--muted);
}

#plan .kp-devices-count {
  display: block;
  margin-top: 3px;
  font-size: 29px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}

#plan .kp-devices-rows {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 11px;
  border-top: 1px solid var(--line-soft);
}

#plan .kp-devices-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}

#plan .kp-devices-row strong {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}

#plan .kp-devices-row strong.is-unlimited {
  color: var(--success);
}

/* The old percentage readout and capacity bar have nothing to
   measure once devices are unlimited, but app.js still writes
   to both, so they stay in the DOM out of sight. */
#plan #plan-device-percentage,
#plan .usage-track {
  display: none !important;
}

#plan .kp-pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 21px;
}

#plan .kp-pillar {
  padding: 14px 15px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface));
}

#plan .kp-pillar strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
}

#plan .kp-pillar span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
}

#plan .kp-band-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 26px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

#plan .kp-fact {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: var(--subtle);
}

#plan .kp-fact strong,
#plan .kp-fact > span[id] {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}

#plan .kp-band-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: auto;
}

#plan .kp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 36px;
  padding: 0 17px;
  border: 0;
  border-radius: 9px;

  background: var(--text);
  color: var(--surface);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

#plan .kp-btn.is-quiet {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-secondary);
  font-weight: 600;
}

#plan .kp-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}


/* ---------- the account strip ----------------------------------- */

#plan .kp-account {
  box-sizing: border-box;
  margin: 14px 0 0;
  padding: 14px 20px;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 26px;

  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--card-shadow);
}

#plan .kp-account-who {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

#plan .kp-account #account-workspace-avatar {
  flex: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;

  border-radius: 9px !important;
  background: var(--accent-soft) !important;

  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--success) !important;
}

#plan .kp-account-names {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#plan .kp-account #account-workspace-name {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

#plan .kp-account #account-workspace-email {
  font-size: 11.5px !important;
  color: var(--subtle) !important;
  line-height: 1.3 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#plan .kp-account .kp-fact {
  min-width: 0;
}

#plan .kp-account #account-workspace-account-id {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11.5px;
}

#plan .kp-account #account-workspace-role-badge,
#plan .kp-account .account-v24-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 8px !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  background: var(--surface-soft) !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}

#plan .kp-account .account-v24-badge.verified {
  border-color: color-mix(in srgb, var(--accent) 34%, transparent) !important;
  background: var(--accent-soft) !important;
  color: var(--success) !important;
}


/* ---------- the ledger ------------------------------------------ */

#plan .kp-ledger {
  box-sizing: border-box;
  margin: 14px 0 0;

  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

#plan .kp-ledger-head {
  padding: 18px 22px 0;
}

#plan .kp-ledger-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

#plan .kp-ledger-title h2 {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

#plan .kp-ledger-note {
  font-size: 12px;
  color: var(--subtle);
}

#plan .kp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 14px;
  border-bottom: 1px solid var(--line-soft);
}

#plan .kp-tab {
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;

  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}

#plan .kp-tab:hover {
  color: var(--text);
}

#plan .kp-tab[aria-selected="true"] {
  border-bottom-color: var(--accent);
  font-weight: 700;
  color: var(--text);
}

#plan .kp-tab:focus-visible {
  outline: none;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

#plan .kp-tab-count {
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-soft);
  font-size: 10.5px;
  font-weight: 800;
  color: var(--subtle);
}

#plan .kp-tab[aria-selected="true"] .kp-tab-count {
  background: var(--accent-soft);
  color: var(--success);
}


/* --- app.js's own markup, restyled from cards into rows --------- */

#plan #plan-services-list {
  display: block !important;
  gap: 0 !important;
}

#plan .plan-capability-section {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#plan .plan-capability-section-heading {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 6px 14px !important;

  margin: 0 !important;
  padding: 12px 22px 9px !important;

  background: var(--surface-soft) !important;
  border-top: 1px solid var(--line-soft) !important;
  border-bottom: 1px solid var(--line-soft) !important;
}

#plan .plan-capability-section-heading > div {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 4px 10px !important;
  min-width: 0 !important;
}

/* The group needs its name, not a paragraph of marketing. */
#plan .plan-capability-eyebrow,
#plan .plan-capability-description {
  display: none !important;
}

#plan .plan-capability-section-heading h3 {
  margin: 0 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: var(--subtle) !important;
}

#plan .plan-capability-meta {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--subtle) !important;
}

/* app.js hard-codes meta: "Unlimited devices" on the two upgrade
   sections as well as the current one, so the same line appeared
   three times down the page. It belongs only on the plan you are
   actually on. */
#plan .plan-capability-section:not(.is-current-plan)
.plan-capability-meta {
  display: none !important;
}

#plan .plan-capability-grid {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}

#plan .plan-capability-section .plan-service-item,
#plan .plan-services-list article {
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;

  min-height: 0 !important;
  margin: 0 !important;
  padding: 10px 22px !important;

  border: 0 !important;
  border-bottom: 1px solid var(--line-soft) !important;
  border-radius: 0 !important;
  background: transparent !important;
  opacity: 1 !important;
}

#plan .plan-service-item:hover {
  background: color-mix(in srgb, var(--accent) 3%, transparent) !important;
}

/* The glyph column was ✓ / 🔒 / ◷. A lock emoji in every other
   row is a lot of visual shouting for "you don't have this";
   a dot in the state's colour says it quietly. */
#plan .plan-service-check {
  flex: none !important;
  display: block !important;
  width: 7px !important;
  min-width: 7px !important;
  height: 7px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--border-strong) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

#plan .plan-service-item.is-included .plan-service-check {
  background: var(--accent) !important;
}

#plan .plan-service-item.is-coming .plan-service-check {
  background: var(--warning) !important;
}

#plan .plan-service-details {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: block !important;
}

#plan .plan-service-topline {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

#plan .plan-service-topline strong {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}

#plan .plan-service-item.is-locked .plan-service-topline strong {
  color: var(--text-secondary) !important;
}

#plan .plan-service-details > p {
  margin: 1px 0 0 !important;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
  color: var(--subtle) !important;
}

/* The category label moves out of the way — the row's group
   heading already says which part of the product it is. */
#plan .plan-capability-category {
  display: none !important;
}

#plan .plan-service-state {
  flex: none !important;
  display: inline-flex !important;
  align-items: center !important;

  padding: 3px 9px !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  background: var(--surface) !important;

  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--subtle) !important;
  white-space: nowrap !important;
}

#plan .plan-service-item.is-included .plan-service-state {
  border-color: color-mix(in srgb, var(--accent) 34%, transparent) !important;
  background: var(--accent-soft) !important;
  color: var(--success) !important;
}

#plan .plan-service-item.is-coming .plan-service-state {
  border-color: color-mix(in srgb, var(--warning) 34%, transparent) !important;
  background: var(--warning-soft) !important;
  color: var(--warning) !important;
}

#plan .plan-capability-section:last-child
.plan-service-item:last-child {
  border-bottom: 0 !important;
}

#plan .service-loading {
  padding: 26px 22px !important;
  text-align: center !important;
  font-size: 13px !important;
  color: var(--subtle) !important;
}


/* --- the filter --------------------------------------------------- */

#plan-services-list[data-kp-filter="included"] .plan-service-item:not(.is-included),
#plan-services-list[data-kp-filter="locked"] .plan-service-item:not(.is-locked),
#plan-services-list[data-kp-filter="coming"] .plan-service-item:not(.is-coming) {
  display: none !important;
}

#plan-services-list[data-kp-filter="included"] .plan-capability-section:not(:has(.plan-service-item.is-included)),
#plan-services-list[data-kp-filter="locked"] .plan-capability-section:not(:has(.plan-service-item.is-locked)),
#plan-services-list[data-kp-filter="coming"] .plan-capability-section:not(:has(.plan-service-item.is-coming)) {
  display: none !important;
}


/* ---------- the plans dialog ------------------------------------- */

.kp-scrim {
  position: fixed;
  inset: 0;
  z-index: 1100;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;

  background: rgba(10, 28, 19, 0.45);
}

.kp-plans {
  box-sizing: border-box;
  width: min(1080px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;

  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(10, 28, 19, 0.28);
}

.kp-plans-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--line-soft);
}

.kp-plans-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.kp-plans-head p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.kp-close {
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

.kp-close:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

.kp-close:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.kp-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kp-col {
  min-width: 0;
  border-right: 1px solid var(--line-soft);
}

.kp-col:last-child {
  border-right: 0;
}

.kp-col.is-current {
  background: var(--surface-soft);
}

.kp-col-head {
  box-sizing: border-box;
  min-height: 186px;
  padding: 20px 20px 18px;
  border-bottom: 1px solid var(--line-soft);

  display: flex;
  flex-direction: column;
  gap: 9px;
}

.kp-col-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
}

.kp-col-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: 999px;
  background: var(--accent-soft);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--success);
}

.kp-col-price {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}

.kp-col-price.is-placeholder {
  font-size: 18px;
  font-weight: 700;
  color: var(--subtle);
}

.kp-col-pitch {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}

.kp-col-cta {
  width: 100%;
  height: 36px;
  margin-top: auto;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}

.kp-col-cta.is-primary {
  border: 0;
  background: var(--text);
  color: var(--surface);
  font-weight: 700;
}

.kp-col-cta.is-current {
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
  background: var(--accent-soft);
  color: var(--success);
  font-weight: 700;
  cursor: default;
}

.kp-col-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.kp-col-rows {
  margin: 0;
  padding: 12px 20px 20px;
  list-style: none;
}

.kp-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 6px 0;
}

.kp-row.is-group {
  padding: 14px 0 5px;
  margin-top: 4px;
  border-top: 1px solid var(--line-soft);
}

.kp-row-mark {
  flex: none;
  width: 14px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.kp-row-mark.is-yes { color: var(--accent); }
.kp-row-mark.is-no { color: var(--border-strong); font-weight: 700; }
.kp-row-mark.is-soon { color: var(--warning); }

.kp-row-text {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text);
}

.kp-row-text.is-off { color: var(--subtle); }

.kp-row-text.is-group {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--subtle);
}

.kp-plans-foot {
  padding: 14px 24px 20px;
  font-size: 12px;
  color: var(--subtle);
}


/* ---------- narrow screens --------------------------------------- */

@media (max-width: 1000px) {
  #plan .kp-pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  /* The heading stacks into a column here, which left the
     account picker on one line and Refresh orphaned below it. */
  #plan .plan-actions {
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  #plan #plan-account-select {
    flex: 1 1 140px !important;
    min-width: 0 !important;
  }

  #plan #plan-refresh-button {
    flex: none !important;
  }

  #plan .kp-band {
    padding: 20px 18px;
  }

  #plan .kp-pitch {
    font-size: 24px;
  }

  #plan .kp-devices {
    flex-basis: 100%;
  }

  #plan .kp-band-actions {
    margin-left: 0;
    width: 100%;
  }

  #plan .kp-btn {
    flex: 1 1 auto;
  }

  #plan .plan-capability-section .plan-service-item {
    align-items: flex-start !important;
    padding: 11px 16px !important;
  }

  #plan .plan-service-check {
    margin-top: 5px !important;
  }

  #plan .plan-service-topline {
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
  }

  #plan .plan-capability-section-heading {
    padding: 12px 16px 9px !important;
  }

  #plan .kp-ledger-head {
    padding: 16px 16px 0;
  }

  .kp-cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .kp-col {
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .kp-col-head {
    min-height: 0;
  }

  .kp-scrim {
    padding: 12px;
  }
}

@media (max-width: 560px) {
  #plan .kp-pillars {
    grid-template-columns: minmax(0, 1fr);
  }
}
