/* ══ THE PRICE CARD, 17 Oct 2026 ══════════════════════════════════════════════
   Round 1 (same day) was a dark glass card with a glow and a light sweep.
   Daniel on his iPhone: "On mobile it still feels cheap". Research: the
   claude.com pricing page on a phone (LOG.md, 17 Oct). Rebuilt on that
   pattern: a white card with a hairline, a small line icon, the plan name in
   the serif, one line of who it is for, the price, one solid button, a small
   note under it, then a plain checklist with thin ticks. No glow, no
   gradient, no sweep. css/calm.css carries the rest of the page.

   ⚠️ THE NUMERAL IS CENTERED... is no longer a rule here: the card reads left
   to right like claude.com, so $50 sits on the left edge with the name.
   ⚠️ Fresh class names on purpose: main.css carries months of .member-card,
   .price and .member-list rules. None of them touch .pc.
   ⚠️ Covenant is hidden until 2027 (Daniel, 17 Oct), so this card stands alone.
   If Covenant comes back, it needs this same look beside it. */

.pc {
  width: min(420px, 100%); margin: 0 auto; text-align: left;
  background: #fff; border: 1px solid rgba(27, 21, 48, .10); border-radius: 22px;
  padding: 32px 30px 30px;
  box-shadow: 0 1px 2px rgba(27, 21, 48, .04);
}
.pc-icon { display: block; width: 44px; height: 44px; color: #1b1530; margin: 0 0 18px -2px; }
.pc-name { margin: 0; font-family: var(--cm-serif, 'Fraunces', Georgia, serif); font-weight: 400;
  font-size: 1.85rem; line-height: 1.15; letter-spacing: -.01em; color: #1b1530; }
.pc-for { margin: 6px 0 0; font-size: 1rem; color: #3a3452; }
.pc-price { margin: 26px 0 0; font-family: var(--cm-serif, 'Fraunces', Georgia, serif); font-weight: 400;
  font-size: 3.4rem; line-height: 1; letter-spacing: -.03em; color: #1b1530; }
.pc-cur { font-size: .5em; vertical-align: .62em; margin-right: .04em; letter-spacing: 0; }
.pc-per { margin: 6px 0 0; font-size: .98rem; color: #6d6684; }

.pc-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; margin-top: 26px;
  border-radius: 999px; background: #6b2ac1; color: #fff; font-weight: 700; font-size: 1.04rem; text-decoration: none;
  transition: background .2s ease;
}
.pc-btn:hover { background: #5a21a6; }
.pc-btn:focus-visible { outline: 2px solid #6b2ac1; outline-offset: 3px; }
.pc-note { margin: 12px 0 0; text-align: center; font-size: .86rem; color: #6d6684; }

.pc-list { list-style: none; margin: 24px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(27, 21, 48, .10);
  display: grid; gap: 14px; }
.pc-list li { display: grid; grid-template-columns: 18px 1fr; column-gap: 12px; align-items: start;
  padding: 0; border: 0; font-size: 1rem; line-height: 1.45; color: #3a3452; }
.pc-list li::before { content: none; }
.pc-list svg { width: 16px; height: 16px; margin-top: 3px; color: #1b1530; }

@media (max-width: 640px) {
  .pc { padding: 28px 22px 26px; border-radius: 20px; }
  .pc-name { font-size: 1.7rem; }
  .pc-price { font-size: 3.1rem; }
}

/* ══ ROUND 3, 17 Oct: THE ONE DEEP VIOLET PIECE ════════════════════════════════
   Daniel, on the clean page: "the membership card is boring and needs to stand
   out", shown a mockup, then "Yes". The page stays light, so this card is the
   one deep violet piece, like a members card: matte violet, $50 big in white
   serif, "per month" in lavender italic, a thin light that travels slowly
   around the edge (the only motion), two faint rings in the corner, an ivory
   Apply button. Wide on desktop (price left, list and button right); price,
   button, list on phones. Same words as round 2. Everything below overrides
   the round 2 rules above, scoped to .plans. */
/* the grid made room for two cards; there is one */
.plans .plan-grid, .plans .plan-grid.single { grid-template-columns: minmax(0, 940px); justify-content: center; }
@property --pc-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.plans .pc {
  position: relative; isolation: isolate; overflow: hidden;
  width: min(940px, 100%); margin: 0 auto; text-align: left;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); column-gap: 64px; align-items: center;
  padding: 56px 60px; border: 0; border-radius: 32px; color: #f6f2ea;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(124, 77, 255, .22), transparent 55%),
    linear-gradient(160deg, #26145a 0%, #1a0d40 52%, #120830 100%);
  box-shadow: 0 0 0 8px rgba(27, 21, 48, .03), 0 0 0 9px rgba(27, 21, 48, .07),
              0 60px 110px -50px rgba(27, 10, 60, .6), inset 0 1px 0 rgba(255, 255, 255, .12);
}
/* a thin light that travels around the edge, slowly */
.plans .pc::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; z-index: 2; pointer-events: none;
  background: conic-gradient(from var(--pc-a), transparent 0deg, rgba(205, 182, 245, .9) 40deg, rgba(255, 140, 190, .75) 70deg, transparent 120deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: pcSpin 9s linear infinite;
}
@keyframes pcSpin { to { --pc-a: 360deg; } }
/* the two rings, big and faint, in the corner */
.plans .pc::after {
  content: ""; position: absolute; right: -90px; bottom: -110px; width: 420px; height: 420px; z-index: -1; opacity: .07; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='19' cy='26' r='11' fill='none' stroke='%23fff' stroke-width='.7'/%3E%3Ccircle cx='29' cy='26' r='11' fill='none' stroke='%23fff' stroke-width='.7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.plans .pc-icon { grid-column: 1; grid-row: 1; color: #f6f2ea; margin: 0 0 20px -2px; }
.plans .pc-name { grid-column: 1; grid-row: 2; color: #fff; font-size: 2.1rem; }
.plans .pc-for { grid-column: 1; grid-row: 3; color: rgba(246, 242, 234, .66); }
.plans .pc-price { grid-column: 1; grid-row: 4; margin-top: 30px; color: #fff; font-size: clamp(5.4rem, 9vw, 7.6rem); line-height: .9; letter-spacing: -.045em; font-variation-settings: "opsz" 144; }
.plans .pc-cur { color: #cdb6f5; font-size: .36em; vertical-align: 1.35em; margin-right: .06em; }
.plans .pc-per { grid-column: 1; grid-row: 5; margin-top: 10px; font-family: var(--cm-serif); font-style: italic; font-size: 1.5rem; color: #cdb6f5; }
.plans .pc-list { grid-column: 2; grid-row: 1 / span 3; align-self: end; margin: 0; padding: 0; border: 0; gap: 18px; }
.plans .pc-list li { color: rgba(246, 242, 234, .88); font-size: 1.04rem; grid-template-columns: 24px 1fr; }
.plans .pc-list svg { width: 24px; height: 24px; padding: 5px; margin-top: 0; border-radius: 50%; color: #fff; background: rgba(205, 182, 245, .16); box-shadow: inset 0 0 0 1px rgba(205, 182, 245, .28); }
.plans .pc-btn { grid-column: 2; grid-row: 4; align-self: end; margin-top: 34px; background: #faf8f4; color: #2a1660; }
.plans .pc-btn::after { background-color: rgba(107, 42, 193, .12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h9m-3.5-4L15 10l-4.5 4' fill='none' stroke='%236b2ac1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.plans .pc-btn:hover { background: #fff; }
.plans .pc-btn:hover::after { background-color: rgba(107, 42, 193, .18); }
.plans .pc-note { grid-column: 2; grid-row: 5; color: rgba(246, 242, 234, .6); }

@media (max-width: 760px) {
  .plans .pc { display: block; padding: 38px 26px 30px; border-radius: 26px;
    box-shadow: 0 0 0 6px rgba(27, 21, 48, .03), 0 0 0 7px rgba(27, 21, 48, .07), 0 40px 70px -40px rgba(27, 10, 60, .6), inset 0 1px 0 rgba(255, 255, 255, .12); }
  .plans .pc::after { width: 300px; height: 300px; right: -80px; bottom: -70px; }
  .plans .pc-name { font-size: 1.8rem; }
  .plans .pc-price { font-size: 5.6rem; margin-top: 24px; }
  .plans .pc-list { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(205, 182, 245, .16); }
  .plans .pc-btn { margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) { .plans .pc::before { animation: none; --pc-a: 200deg; } }