/* casttit.com/pricing (founder, 10 Nov 2026: "cards, not a spreadsheet"): the plans as cards and a short trust row,
   wider than the reading column; the detailed table follows below. On top of site.css, pages.css and lux.css. */
body.lux .prose .plans, body.lux .prose .plan-trust {
  --wide: min(1160px, calc(100vw - 40px));
  width: var(--wide); margin-left: calc(50% - var(--wide) / 2); margin-right: 0;
}
body.lux .prose .plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch;
  margin-top: 26px; padding-top: 14px; }

/* a card */
body.lux .prose .plan { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 30px 26px 26px;
  border-radius: 26px; background: var(--white); border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(14, 16, 20, .03), 0 22px 44px -32px rgba(14, 16, 20, .35); }
body.lux .prose .plan .plan-name { margin: 0; font: 800 21px/1.2 var(--display); letter-spacing: -.02em; color: var(--text); }
body.lux .prose .plan .plan-price { margin: 8px 0 0; display: flex; align-items: baseline; gap: 6px; color: var(--muted); }
body.lux .prose .plan .plan-price b { font: 800 48px/1 var(--display); letter-spacing: -.045em; color: var(--text); }
body.lux .prose .plan .plan-price span { font-size: 16px; font-weight: 600; }
body.lux .prose .plan .plan-sub { margin: 0; font-size: 14.5px; color: var(--subtle); }
body.lux .prose .plan .plan-for { margin: 10px 0 2px; font-weight: 700; color: var(--text); line-height: 1.45; }
body.lux .prose ul.plan-list { list-style: none; margin: 8px 0 14px; padding: 18px 0 0; border-top: 1px solid var(--line);
  display: grid; gap: 11px; }
body.lux .prose .plan-list li { position: relative; padding-left: 31px; font-size: 15.5px; line-height: 1.45; color: var(--muted); }
body.lux .prose .plan-list li b { color: var(--text); }
body.lux .prose .plan-list li::before { content: ""; position: absolute; left: 0; top: 1px; width: 21px; height: 21px;
  border-radius: 50%; background: rgba(59, 209, 138, .16) no-repeat center / 12px
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314683D' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>"); }
body.lux .prose .plan-list li.minus::before { background-color: var(--raise);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B707A' stroke-width='3.2' stroke-linecap='round'><path d='M6.5 12h11'/></svg>"); }
body.lux .prose .plan .plan-btn { margin-top: auto; width: 100%; height: 52px; justify-content: center; }
body.lux .prose .plans a.btn { text-decoration: none; }
body.lux .prose .plans a.btn-primary, body.lux .prose .plans a.btn-primary:hover { color: #14080A; }
body.lux .prose .plans a.btn-quiet { color: var(--text); }
body.lux .prose .plan .plan-note { margin: 4px 0 0; font-size: 14px; text-align: center; }

/* Creator: the one we recommend */
body.lux .prose .plan.hi { background: var(--ink); color: #E9EAED; border-color: rgba(255, 91, 46, .6);
  background-image: radial-gradient(120% 70% at 85% -10%, rgba(255, 91, 46, .30), rgba(255, 91, 46, 0) 60%);
  box-shadow: 0 34px 64px -34px rgba(255, 91, 46, .65), 0 0 0 1px rgba(255, 91, 46, .18); transform: translateY(-10px); }
body.lux .prose .plan.hi .plan-name, body.lux .prose .plan.hi .plan-price b, body.lux .prose .plan.hi .plan-for { color: #FFFFFF; }
body.lux .prose .plan.hi .plan-price, body.lux .prose .plan.hi .plan-sub, body.lux .prose .plan.hi .plan-note { color: #AEB2BB; }
body.lux .prose .plan.hi .plan-list { border-top-color: rgba(255, 255, 255, .12); }
body.lux .prose .plan.hi .plan-list li { color: #D2D5DB; }
body.lux .prose .plan.hi .plan-list li b { color: #FFFFFF; }
body.lux .prose .plan.hi .plan-list li::before { background-color: rgba(59, 209, 138, .18);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233BD18A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>"); }
body.lux .prose .plan.hi .plan-note a { color: #FF9D80; }
body.lux .prose .plan-badge { position: absolute; top: -13px; left: 24px; padding: 6px 12px; border-radius: 999px;
  background: var(--signal); color: #14080A; font: 800 11.5px/1 var(--body); letter-spacing: 1.4px; text-transform: uppercase;
  box-shadow: 0 8px 18px -8px rgba(255, 91, 46, .8); }

/* Pro: coming soon */
body.lux .prose .plan.soon { background: rgba(255, 255, 255, .45); border-style: dashed; border-color: var(--line-2); box-shadow: none; }
body.lux .prose .plan.soon .plan-price b { font-size: 30px; letter-spacing: -.03em; color: var(--muted); padding: 9px 0 5px; }
body.lux .prose .plan.soon .plan-list li::before { background-color: var(--raise);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B707A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>"); }
body.lux .prose .plan-off { background: var(--raise); color: var(--subtle); cursor: default; border: 1px solid var(--line); }

/* the trust row */
body.lux .prose ul.plan-trust { list-style: none; padding: 0; margin-top: 30px; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
body.lux .prose .plan-trust li { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px;
  background: var(--white); border: 1px solid var(--line); }
body.lux .prose .plan-trust .ico { width: 40px; height: 40px; border-radius: 11px; background: var(--signal-soft);
  display: grid; place-items: center; flex: none; }
body.lux .prose .plan-trust .ico svg { width: 21px; height: 21px; fill: none; stroke: var(--signal); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
body.lux .prose .plan-trust b { display: block; font: 700 15px/1.3 var(--display); color: var(--text); }
body.lux .prose .plan-trust span { display: block; font-size: 13.5px; line-height: 1.35; color: var(--subtle); }
body.lux .prose .plan-fine { font-size: 14.5px; color: var(--subtle); text-align: center; margin: 6px 0 0; }

@media (max-width: 1000px) {
  body.lux .prose ul.plan-trust { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  body.lux .prose .plans { grid-template-columns: 1fr; width: auto; margin-left: 0; max-width: 520px; justify-self: center;
    gap: 26px; }
  body.lux .prose .plan.hi { transform: none; }
  body.lux .prose ul.plan-trust { width: auto; margin-left: 0; }
}
@media (max-width: 520px) {
  body.lux .prose ul.plan-trust { grid-template-columns: 1fr; }
  body.lux .prose .plan { padding: 28px 20px 22px; }
}