/* ORGANIZATION PLANS page (founder rulings D-ORG-1..D-ORG-15, 2026-10-14; build step A).
   Everything here sits under .pricing (the candidate plans page's own scope, assets/css/pricingplans.css, which already carries the
   hero console, cards, band, FAQ and the form) and uses ONLY that scope's token variables: no literal colours, so the page follows
   the one brand set (D-230). The classes are this page's own (.op-*); no shared component class is restyled (File Ownership Law).
   Motion: the shared reveal (jz-motion.css) and the console from pricingplans.css; nothing here hides content. */

/* Four plan cards: one column on a phone, two on a tablet, four on a wide screen. */
.pricing .op-plans { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .pricing .op-plans { grid-template-columns: repeat(2, 1fr); align-items: stretch; } }
@media (min-width: 1180px) { .pricing .op-plans { grid-template-columns: repeat(4, 1fr); } }
.pricing .op-addons, .pricing .op-pledge { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .pricing .op-addons, .pricing .op-pledge { grid-template-columns: repeat(3, 1fr); } }
.pricing .op-plan .pr-b { margin-top: auto; text-align: center; }
.pricing .op-price-wait { font-size: 1.7rem; }
/* Four cards are narrower than the candidate page's three, so "/ month + applicable tax" takes its own line instead of breaking mid-phrase. */
.pricing .op-plan .pr-price small { display: block; margin-top: 6px; }
.pricing .op-addon p, .pricing .op-pledge p { color: var(--body); margin: 0; }
.pricing .op-addon-price { font-size: 1.6rem; margin: 4px 0 8px; }
.pricing .op-room-note { margin: 18px 0 0; max-width: 78ch; }

/* The "Coming soon" tag: follows the feature's own switch (D-303), set in the template. */
.pricing .op-tag { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--tint); border: 1px solid var(--line-t);
  color: var(--wine); font-size: 11.5px; font-weight: 700; line-height: 1.4; vertical-align: middle; white-space: nowrap; }

/* On the dark plan card (the candidate page's dark card style) the tag reads light on plum, like that card's own badge. */
.pricing .op-plan.pr-nav .op-tag { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: var(--on-dark); }

/* The free list runs two columns on a wide screen. */
.pricing .op-feat-wide { margin: 0; }
@media (min-width: 900px) { .pricing .op-feat-wide { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 32px; } .pricing .op-feat-wide li:nth-child(2) { border-top: none; } }

/* The recruitment cycle: numbered steps. */
.pricing .op-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: op; }
.pricing .op-step { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; background: var(--card); border: 1px solid var(--line-n); border-radius: 12px; counter-increment: op; }
.pricing .op-step::before { content: counter(op); flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--tint); color: var(--wine); font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.pricing .op-step-t { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.pricing .op-step-p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--body); }
.pricing .op-cycle-cta { margin-top: 18px; }

/* The waitlist form inside the dark band. */
.pricing .op-waitlist { max-width: 520px; }