/* ===================== NoDrama plan cards =====================
   The billing toggle + three plan cards: one component shared by the Pricing
   page and the homepage pricing section (markup: inc/nodrama/render/plans.php).
   Loads after main.css, which supplies the .nd-tab base and .nd-reveal.
   Moved out of pricing.css on 2026-09-22 with its override layers folded in,
   so each rule below is the final value, not a patch on an earlier one. */

.np-plans{display:flex;flex-direction:column;align-items:center;gap:44px;width:100%}

/* --- Toggle --- */
.np-toggle-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%}
.np-toggle{display:inline-flex;height:66px;max-width:100%;border:1px solid #e3e3e3}
.np-toggle .nd-tab{padding:0 28px;gap:10px;white-space:nowrap}

/* --- Cards --- */
.np-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1216px;width:100%;margin:0 auto;align-items:center}
.np-card{position:relative;overflow:visible;background:#fff;border:1px solid #e3e3e3;border-radius:12px;padding:32px;display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease}
.np-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.07)}
.np-card--rec{background:#f3fdf4;border:2px solid #00d920;align-self:stretch}

/* Badges sit out of flow, straddling the card's top edge, so no card reserves
   room for one and all three start at the plan name. The dark filled pill is
   the recommended plan's; the outlined --alt is the quieter guidance badge. */
.np-card__badge{position:absolute;top:-14px;left:28px;z-index:1;display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;min-height:28px;max-width:calc(100% - 56px);padding:7px 12px;border-radius:5px;background:#262626;color:#fff;font-family:'League Spartan',sans-serif;font-weight:600;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap}
.np-card__badge svg{width:8px;height:8px}
.np-card--rec .np-card__badge{top:-16px}
.np-card__badge--alt{top:-15px;gap:8px;padding:5px 12px;border:1px solid #d7d7d7;background:#fff;color:#262626;box-shadow:0 1px 2px rgba(0,0,0,.04);font-size:12px;font-weight:600;line-height:1.35;letter-spacing:.1px;text-transform:none;text-align:left}
.np-card__badge-ic{display:block;flex:0 0 auto;width:13px;height:13px}

.np-card__name{margin:0;font-family:'General Sans',sans-serif;font-weight:600;font-size:28px;line-height:1.1;letter-spacing:-0.3px;color:#262626}
.np-card__price{display:flex;align-items:baseline;gap:8px;margin-top:16px}
.np-card__amt{font-family:'League Spartan',sans-serif;font-weight:700;font-size:52px;line-height:1;letter-spacing:-1.5px;color:#262626}
.np-card__per{font-family:'General Sans',sans-serif;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#8a8a8a}
/* Sits directly under the plan name (moved up from under the cost panel, 2026-09-29). */
.np-card__desc{margin:8px 0 0;font-family:'General Sans',sans-serif;font-size:14.5px;line-height:1.4;letter-spacing:-0.1px;color:#404040}
.np-card__sep{height:1px;background:#e3e3e3;margin:24px 0 6px}
.np-card--rec .np-card__sep{background:#cdeccf}
.np-card__rows{display:flex;flex-direction:column}
.np-card__row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;font-size:14px}
.np-card__row-k{font-family:'General Sans',sans-serif;color:#404040}
.np-card__row-v{font-family:'League Spartan',sans-serif;font-weight:700;color:#262626;white-space:nowrap}
.np-card__cta{margin-top:26px;display:flex;align-items:center;justify-content:center;gap:8px;padding:17px;border-radius:8px;background:#262626;color:#fff;font-family:'League Spartan',sans-serif;font-weight:600;font-size:15px;line-height:1;transition:background .25s,transform .25s}
.np-card__cta:hover{background:#000;transform:translateY(-2px)}
.np-card__cta svg{width:10px;height:8px}
.np-card--rec .np-card__cta{background:#00d920;color:#262626}
.np-card--rec .np-card__cta:hover{background:#00c41d}

/* --- Monthly vs annual panel ---
   What differs between the two terms is what setup and a hack cleanup cost, so
   it sits under the price and changes with the toggle: the monthly figure is
   struck through and a green FREE pill pops in. State comes from data-nd-term
   on .np-plans, which the period toggle in main.js sets. */
.np-terms{margin-top:18px;padding:2px 14px;border-radius:8px;background:#f5f5f5;transition:background .3s ease;container-type:inline-size}
.np-card--rec .np-terms{background:#fff}
.np-terms__row{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;column-gap:12px;row-gap:4px;padding:10px 0;font-size:13.5px;line-height:1.2}
.np-terms__row+.np-terms__row{border-top:1px solid #e6e6e6}
.np-card--rec .np-terms__row+.np-terms__row{border-top-color:#e3f3e5}
.np-terms__k{font-family:'General Sans',sans-serif;color:#404040}
/* Value on line 1, and on line 2 the Monthly nudge chip or the Yearly FREE pill -
   same box, same slot, so the panel is one height on both terms. */
.np-terms__v{display:inline-flex;flex-direction:column;align-items:flex-end;gap:6px;min-height:18px;margin-left:auto;white-space:nowrap}
.np-terms__m{font-family:'League Spartan',sans-serif;font-weight:700;color:#262626;text-decoration:line-through;text-decoration-color:transparent;text-decoration-thickness:1.5px;transition:color .25s ease,text-decoration-color .25s ease}
.np-terms__a{display:none;align-items:center;padding:4px 9px 3px;border-radius:999px;background:#00d920;color:#262626;font-family:'League Spartan',sans-serif;font-weight:700;font-size:11px;letter-spacing:1px;text-transform:uppercase;line-height:1}
[data-nd-term="a"] .np-terms{background:#edf8ef}
[data-nd-term="a"] .np-card--rec .np-terms{background:#fff}
[data-nd-term="a"] .np-terms__m{color:#a3a3a3;text-decoration-color:#a3a3a3}
[data-nd-term="a"] .np-terms__a{display:inline-flex;animation:np-term-pop .32s cubic-bezier(.2,.9,.3,1.35)}
@keyframes np-term-pop{0%{opacity:0;transform:scale(.55)}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.np-terms__a{animation:none!important}.np-terms,.np-terms__m{transition:none}}
/* Keep the panel one height on both terms. Annual is the wider state (struck
   figure + pill, ~255px), so when the panel cannot fit it on one line BOTH
   states stack - otherwise toggling would make every card jump. */
@container (max-width:261px){.np-terms__row{flex-direction:column;align-items:flex-start}.np-terms__v{margin-left:0;align-items:flex-start}}

/* Screen-reader-only helper (the pricing page's comparison table uses it too). */
.np-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

@media(max-width:1100px){
 .np-card__badge{left:20px;max-width:calc(100% - 40px)}
 .np-card__badge--alt{font-size:11px;padding:6px 10px;gap:6px}
}
/* Stacked cards need 34px between rows so each straddling badge clears the
   card above it. */
/* Tablet/mobile toggle. Full width so it lines up with the stacked cards.
   .np-toggle's width:100% only resolves because .np-toggle-wrap is width:100%
   here: the wrap used to be stretched by the microcopy paragraph beside the
   toggle, so when that copy was retired the toggle collapsed to a cramped
   125px box. The old 12px/6px squeeze was for three long labels
   ("Quarterly (Save 10%)") and is not needed by "Monthly" / "Annual". */
@media(max-width:900px){
 .np-plans{gap:28px}
 .np-toggle-wrap{width:100%}
 .np-toggle{width:100%;height:60px}
 .np-toggle .nd-tab{padding:0 12px;font-size:16px;letter-spacing:.8px;white-space:nowrap}
 .np-cards{grid-template-columns:1fr;gap:34px 20px}
 .np-card--rec{align-self:auto}
}
@media(max-width:600px){
 .np-toggle-wrap{gap:12px}
 .np-toggle{height:56px}
 .np-toggle .nd-tab{padding:0 10px;font-size:15px;letter-spacing:.6px;white-space:nowrap;text-align:center;line-height:1.15}
}

/* Link under each plan button to the comparison table (Pricing page only; the
   homepage passes no target, so it never renders there). */
.np-card__more{display:block;width:fit-content;max-width:100%;margin:16px auto 0;color:#262626;font-family:'League Spartan',sans-serif;font-weight:500;font-size:14px;line-height:1.3;text-align:center;text-decoration:underline;text-decoration-color:#bdbdbd;text-underline-offset:4px;text-decoration-thickness:1px;transition:text-decoration-color .2s}
.np-card__more-plan{white-space:nowrap}
.np-card__more svg{display:inline-block;vertical-align:middle;margin:-2px 0 0 7px;width:10px;height:8px;color:#00ad19;transform:rotate(90deg);transition:transform .2s}
.np-card__more:hover,.np-card__more:focus-visible{text-decoration-color:#00d920}
.np-card__more:hover svg{transform:rotate(90deg) translateX(2px)}
@media(prefers-reduced-motion:reduce){.np-card__more,.np-card__more svg{transition:none}}

/* Monthly-only nudge: "$0 on Yearly" under each monthly cost. Same box as the
   FREE pill it trades places with (4/9/3px padding, 11px/1), so toggling never
   changes height. Tap = flip to Yearly (main.js, [data-nd-flip]). */
.np-terms__nudge{display:inline-flex;align-items:center;position:relative;overflow:hidden;margin:0;border:0;padding:4px 9px 3px;border-radius:999px;background:#edf8ef;box-shadow:inset 0 0 0 1px #bfe8c6;color:#067a16;font-family:'League Spartan',sans-serif;font-weight:700;font-size:11px;letter-spacing:1px;text-transform:uppercase;line-height:1;cursor:pointer;-webkit-appearance:none;appearance:none;transition:background .2s,color .2s,box-shadow .2s}
.np-terms__nudge:hover,.np-terms__nudge:focus-visible{background:#00d920;color:#262626;box-shadow:inset 0 0 0 1px #00d920}
.np-terms__nudge:focus-visible{outline:2px solid #262626;outline-offset:2px}
[data-nd-term="a"] .np-terms__nudge{display:none}
/* One soft shine across each chip, twice, when the cards first come into view. */
.np-terms__nudge::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.9) 50%,transparent 70%);transform:translateX(-110%);pointer-events:none}
.np-cards.is-visible .np-terms__nudge::after{animation:np-nudge-shine 1s ease-out 1.1s 2}
@keyframes np-nudge-shine{to{transform:translateX(110%)}}
@media(prefers-reduced-motion:reduce){.np-terms__nudge::after{animation:none!important}.np-terms__nudge{transition:none}}

/* Side-by-side cards: reserve the same room for name + description in all three,
   so the prices below line up even when one name or description wraps further
   (the current names wrap to 2 lines up to ~1170px, a description to 3 lines up
   to ~1100px). Plan names are ACF-editable: a longer name may need 1180 raised. */
@media(min-width:901px){.np-card__desc{min-height:calc(2em * 1.4)}}
@media(min-width:901px) and (max-width:1180px){.np-card__name{min-height:calc(2em * 1.1)}}
@media(min-width:901px) and (max-width:1100px){.np-card__desc{min-height:calc(3em * 1.4)}}