/* /pro: the status strip, the table of what each plan gets (Free is the
   plan you are on, so its column is tinted), then the two ways to get Pro
   or Max as two cards. Nothing here moves. */

.pro-strip, .pro-compare, .pro-get, .pro-foot { width: min(var(--page-max), 100% - var(--gutter)); margin-inline: auto; }
.pro-strip, .pro-compare { background: var(--card); border-radius: var(--r-card); box-shadow: var(--ring-card); }
.pro-n { font-family: var(--font-mono); font-weight: var(--w-title); color: var(--ink); letter-spacing: 0; }
.pro-unit { color: var(--ink-muted); }

/* Status strip: the plan, a full ring of today's fresh fetches, the note, the button */
.pro-strip {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "plan meter note button";
  align-items: center; gap: 12px 20px; padding: 16px 20px;
}
.pro-strip > .label { grid-area: plan; justify-self: start; }
.pro-strip > .pill { grid-area: button; }
.pro-meter { grid-area: meter; display: flex; align-items: center; gap: 12px; }
.pro-ring { display: grid; place-items: center; flex: none; width: 40px; height: 40px; color: var(--live); }
.pro-ring > svg, .pro-ring-n { grid-area: 1 / 1; }
.pro-ring-n { font-family: var(--font-mono); font-size: 15px; line-height: 20px; font-weight: var(--w-title); color: var(--ink); }
.pro-meter-t { font-size: 14px; line-height: 20px; }
.pro-meter-1, .pro-meter-2 { display: block; }
.pro-meter-1 { font-weight: var(--w-heading); }
.pro-meter-2 { color: var(--ink-muted); }
.pro-note {
  grid-area: note; max-width: 560px; padding-left: 20px; border-left: 1px solid var(--divider);
  font-size: 14px; line-height: 20px; color: var(--ink-muted);
}

/* The table: a row per feature, a column per plan */
.pro-compare { margin-top: 12px; padding: 4px 20px 8px; container: pro / inline-size; }
.pro-table { width: 100%; border-collapse: separate; font-size: 14px; line-height: 20px; }
.pro-table th, .pro-table td { padding: 12px 16px; vertical-align: middle; }
.pro-table tbody th, .pro-table tbody td { border-top: 1px solid var(--divider); }
.pro-table tbody td { width: 22%; text-align: center; }
.pro-corner { width: 34%; }
.pro-table .pro-head { padding-top: 20px; padding-bottom: 18px; text-align: center; vertical-align: top; }
.pro-plan { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 17px; line-height: 22px; font-weight: var(--w-title); letter-spacing: -0.25px; }
.pro-price { display: block; margin-top: 6px; color: var(--ink-muted); }
.pro-price .pro-n { font-size: 24px; line-height: 30px; }
.pro-btn { width: 100%; max-width: 180px; margin-top: 14px; }
.pill.is-outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-dim); }
.pill.is-outline:hover { background: var(--ghost-fill); }
.pro-table .is-free { background: var(--tile); }
.pro-head.is-free { border-radius: var(--r-tile) var(--r-tile) 0 0; }
.pro-table tbody tr:last-child .is-free { border-radius: 0 0 var(--r-tile) var(--r-tile); }
.pro-label { display: block; }
.pro-hint { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.pro-words { color: var(--ink-2); }
.pro-table .tick { width: 14px; height: 14px; color: var(--ink); }
.pro-no { display: inline-block; width: 12px; height: 2px; border-radius: 1px; background: var(--ink-dim); vertical-align: middle; }

/* Below 620px of card width each feature is its own row over its three cells */
@container pro (max-width: 620px) {
  .pro-table, .pro-table thead, .pro-table tbody { display: block; }
  .pro-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 6px; }
  .pro-corner { display: none; }
  .pro-table .pro-head { padding: 14px 4px 12px; }
  .pro-head.is-free { border-radius: var(--r-tile); }
  .pro-plan { gap: 6px; font-size: 15px; line-height: 20px; }
  .pro-price .pro-n { font-size: 20px; line-height: 26px; }
  .pro-btn { height: 32px; margin-top: 10px; padding: 0 8px; font-size: 14px; }
  .pro-table tbody th { grid-column: 1 / -1; padding: 10px 0 6px; }
  .pro-table tbody td { width: auto; padding: 6px 4px; border-top: 0; }
  .pro-table tbody tr { padding-bottom: 10px; }
  .pro-table tbody td.is-free, .pro-table tbody tr:last-child .is-free { border-radius: var(--r-chip); }
}

/* Two ways to get Pro or Max */
.pro-get { margin-top: 40px; }
.pro-h2 { font-size: 24px; line-height: 30px; letter-spacing: -0.4px; }
.pro-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; align-items: start; }
.pro-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pro-text { margin-top: 10px; color: var(--ink-muted); }
.pro-pass-grid, .pro-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin-top: 16px; }
.pro-passes .eyebrow { margin-bottom: 4px; }
.pro-pass { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; border-top: 1px solid var(--divider); font-size: 14px; }
.pro-pass-name { color: var(--ink-2); }
.pro-pass-cost { text-align: right; }
.pro-tile { padding: 14px 16px; background: var(--tile); border-radius: var(--r-tile); box-shadow: var(--ring-tile); }
.pro-tile-v { margin-top: 4px; font-size: 14px; line-height: 20px; }
.pro-tile-v .pro-n { display: block; font-size: 22px; line-height: 28px; }
.pro-connect { width: 100%; height: 40px; margin-top: 16px; }
.pro-connect[aria-disabled="true"], .pro-connect[aria-disabled="true"]:hover { background: var(--ghost-fill); color: var(--ink-muted); cursor: not-allowed; }
.pro-connect .ico { width: 18px; height: 18px; }
.pro-steps { margin-top: 16px; padding-left: 20px; list-style: decimal; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.pro-steps li + li { margin-top: 6px; }
.pro-steps li::marker { color: var(--ink-muted); }
.pro-ca { margin-top: 16px; padding: 12px 14px; border-radius: var(--r-tile); box-shadow: var(--ring-tile); }
.pro-ca-v { margin-top: 2px; font-family: var(--font-mono); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.pro-fine { margin-top: 12px; font-size: 13px; line-height: 19px; color: var(--ink-muted); }
.pro-x402 { margin-top: 16px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.pro-foot { margin-top: 24px; font-size: 13px; line-height: 19px; color: var(--ink-muted); }

@media (max-width: 960px) {
  .pro-ways { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .pro-strip { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "plan button" "meter meter" "note note"; padding: 14px 16px; }
  .pro-note { max-width: none; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--divider); }
  .pro-compare { padding: 0 12px 4px; }
  .pro-get { margin-top: 32px; }
  .pro-card { padding: 16px; }
  .pro-pass-grid { grid-template-columns: minmax(0, 1fr); }
}