/* css/pricing-cards.css — the pricing card block (js/items/pricing-cards.js): only what app.css's shared classes do not give. The
   head: the time on the left, the Research prices / Recalculate button on the right. */
.pc-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
/* The AI value card (.pc-value, with the classes lr-card lr-est and its lr-note, lr-big and lr-est-acts inside): the values of app.css's
   "#lr-panel-wrap .lr-card", ".lr-card.lr-est", ".lr-note", ".lr-card .lr-big" and ".lr-est-acts" rules, copied
   here because those rules reach only inside #lr-panel-wrap and this block also draws on the Add Item form. The actions row centres its
   buttons and the Terapeak link on one line. */
.pc-value{margin-top:10px;border:1px solid #c9d6ff;border-radius:8px;padding:10px 12px;background:#f3f6ff}
.pc-value .lr-note{font-size:12px;font-weight:400;color:var(--text);line-height:1.4}
.pc-value .lr-big{font-size:16px;font-weight:700}
.pc-value .lr-est-acts{display:flex;align-items:center;gap:14px;margin-top:6px}
/* The boxes Searching..., the unavailable line and the sell-through line (.pc-st-top: the sell-through heading and the window on the right).
   They look like the AI value card: the border, radius, padding and fill are the values of app.css's "#lr-panel-wrap .lr-card" and
   "#lr-panel-wrap .lr-card.lr-est" rules, copied here because those rules reach only inside #lr-panel-wrap and this block also draws on the Add Item form. */
.pc-st{margin:10px 0 0;border:1px solid #c9d6ff;border-radius:8px;padding:10px 12px;background:#f3f6ff;font-size:12px;line-height:1.45}
.pc-st-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:2px}
/* The window pill ("90 days" / "1 year"): the mockup's .mk-st-win (MOCKUP_PRICING_2026-11-01.html), values copied: white fill, blue edge and blue text. */
.pc-pill{flex:none;font-size:13px;font-weight:800;color:#1f3fbf;background:#fff;border:1px solid #c9d6ff;border-radius:6px;padding:2px 8px;white-space:nowrap}
/* A platform's card, copied from the mockup's .mk-plat rules (MOCKUP_PRICING_2026-11-01.html): two lines (.pc-top), the name, the price and a
   .btn-small; the second line (.pc-pay) is the Payout in a lighter name and a smaller price. */
.pc-plat{border:1px solid var(--border);border-radius:8px;padding:9px 11px;margin-top:8px;background:var(--surface)}
.pc-top{display:flex;align-items:baseline;gap:8px}
.pc-name{font-weight:700;font-size:13px;flex:1}
.pc-price{font-size:15px;font-weight:800}
.pc-top .btn-small{min-width:52px}
.pc-pay{margin-top:2px}
.pc-pay .pc-name{font-weight:400;color:var(--muted)}
.pc-pay .pc-price{font-size:13px;font-weight:700}
.pc-note{font-size:12px;line-height:1.4}
/* The WHY pop-up: its top (price, notes and Use this price), a tile's tick over the picture's corner, the profit breakdown's and a math price's lines. */
.pc-why-top{display:flex;align-items:center;gap:14px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.pc-big{font-size:26px;font-weight:800}
.pc-tick{position:absolute;top:6px;right:6px;z-index:2}
.pc-math{margin-top:10px;font-size:14px;line-height:1.8}