/* =====================================================================
   yourtimes.app · landing plan cards v4, Showcase / Library (user-approved 8 Oct 2026)
   Rules = design/launch-review/pricing-mock/tools/build.py CSS (Design v4), scoped to .pcards; markup:
   cs_platform/pricing_cards.py. Colours are the landing --ed-* tokens (same values as the mock: paper #FBFAF7,
   ink #111, frame #BDB7AC / #5A544B, hair #CFCBC3 / #4A443B), so light / dark / prefers-color-scheme follow the page.
   Radius 0. No shadows, gradients, pills, badges, icons or emoji. The «−21%» on the toggle (pricing.css) is the only
   percentage. AR: Noto Naskh Arabic first in every stack, amounts in <bdi dir="ltr">, logical properties (mirrored).
   ===================================================================== */
.pcards {
  --pcd-paper-2: var(--ed-paper-2, #FFFFFF); --pcd-ink: var(--ed-ink, #111111); --pcd-ink-2: var(--ed-ink-2, #3D3B38);
  --pcd-ink-3: var(--ed-ink-3, #5E5B56); --pcd-hair: var(--ed-hair, #CFCBC3); --pcd-frame: var(--ed-frame, #BDB7AC);
  --pcd-accent: var(--ed-accent, #D6391F); --pcd-btn-bg: var(--ed-btn-bg, #111111); --pcd-btn-fg: var(--ed-btn-fg, #FBFAF7);
  --pcd-f-display: 'Noto Serif Display', Georgia, serif; --pcd-f-serif: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --pcd-f-ui: 'Inter Tight', 'Inter', system-ui, sans-serif;
  color: var(--pcd-ink); font-family: var(--pcd-f-serif); font-size: 17px; line-height: 1.5;
}
html[lang=ar] .pcards { --pcd-f-display: 'Noto Naskh Arabic', 'Noto Serif Display', serif; --pcd-f-serif: 'Noto Naskh Arabic', 'Source Serif 4', serif;
  --pcd-f-ui: 'Noto Naskh Arabic', 'Inter Tight', sans-serif; line-height: 1.7; }
.pcards :where(p, h3, div, span, article, b) { margin: 0; padding: 0; }
html[lang=ar] .pcards .name { letter-spacing: 0; line-height: 1.35; }
html[lang=ar] .pcards .shot { object-position: top right; }
html[lang=ar] .pcards .row .k, html[lang=ar] .pcards .fine, html[lang=ar] .pcards .plus { font-size: 15px; }
html[lang=ar] .pcards .notes { font-size: 14.5px; }
html[lang=ar] .pcards .cta { font-size: 16px; }
.pcards .price .big bdi { font-family: 'Noto Serif Display', Georgia, serif; }
.pcards bdi.num { font-variant-numeric: lining-nums; }
/* shared line */
.pcards .both { margin-top: 2px; padding: 14px 0; border-top: 1px solid var(--pcd-hair); border-bottom: 1px solid var(--pcd-hair); color: var(--pcd-ink-2); font-size: 17px; }
.pcards .both b { color: var(--pcd-ink); font-weight: 600; }
/* cards: subgrid keeps every row aligned across the two cards (13 rows: crop, name, desc, for, price, lead-in, 6 rows, CTA;
   the second crop <img> of the other theme is display:none, so it takes no track) */
.pcards .cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; margin-top: 32px; grid-template-rows: repeat(13, auto); }
.pcards .card { display: grid; grid-row: span 13; grid-template-rows: subgrid; row-gap: 0; border: 1px solid var(--pcd-frame); border-radius: 0; padding: 24px 28px 28px; background: transparent; min-width: 0; }
.pcards .shot { display: block; width: 100%; height: auto; aspect-ratio: 1060/592; object-fit: cover; object-position: top left; border: 1px solid var(--pcd-hair);
  background: var(--pcd-paper-2); outline: 0; container-type: normal; overflow: hidden; }
.pcards .shot-night { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pcards .shot-paper { display: none; }
  :root:not([data-theme="light"]) .pcards .shot-night { display: block; }
}
:root[data-theme="dark"] .pcards .shot-paper { display: none; }
:root[data-theme="dark"] .pcards .shot-night { display: block; }
.pcards .name { margin-top: 22px; font-family: var(--pcd-f-display); font-weight: 700; font-size: 34px; line-height: 1.15; letter-spacing: -.005em; }
.pcards .sub { margin-top: 6px; font-size: 19px; line-height: 1.4; color: var(--pcd-ink); }
.pcards .whom { margin-top: 10px; color: var(--pcd-ink-2); font-size: 16px; line-height: 1.45; }
.pcards .price { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--pcd-hair); margin-bottom: 22px; }
.pcards .fine { margin-top: 10px; font: 400 14px/1.4 var(--pcd-f-ui); color: var(--pcd-ink-3); }
.pcards .row { display: grid; grid-template-columns: 42% 1fr; gap: 16px; padding: 11px 0; border-top: 1px solid var(--pcd-hair); font-size: 16px; line-height: 1.4; align-items: baseline; }
.pcards .row:first-of-type { margin-top: 8px; }
.pcards .row.last { border-bottom: 1px solid var(--pcd-hair); }
.pcards .row .k { font: 500 14px/1.4 var(--pcd-f-ui); color: var(--pcd-ink-2); }
.pcards .row .v { color: var(--pcd-ink); }
.pcards .row .v.no { color: var(--pcd-ink-3); }
.pcards .cta { margin-top: 24px; display: flex; align-items: center; justify-content: center; height: 50px; padding: 0 20px; background: var(--pcd-btn-bg); color: var(--pcd-btn-fg);
  font: 600 15px/1 var(--pcd-f-ui); text-decoration: none; border-radius: 0; }
.pcards .cta:hover, .pcards .cta:visited { color: var(--pcd-btn-fg); }
.pcards .cta:focus-visible { outline: 2px solid var(--pcd-accent); outline-offset: 2px; }
.pcards .under { margin-top: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; font-size: 17px; }
.pcards .under a { color: var(--pcd-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pcards .under a:focus-visible { outline: 2px solid var(--pcd-accent); outline-offset: 2px; }
.pcards .under .bes { color: var(--pcd-ink-2); }
/* billing state (.pcards[data-billing] follows the «Помесячно / За год» toggle, static/js/landing.js; no JS = monthly) */
.pcards[data-billing=monthly] .y, .pcards[data-billing=yearly] .m { display: none; }
.pcards .price .big { font-family: var(--pcd-f-display); font-weight: 700; font-size: 64px; line-height: 1; letter-spacing: -.01em; }
.pcards .price .per { font-family: var(--pcd-f-serif); font-weight: 400; font-size: 24px; color: var(--pcd-ink-2); letter-spacing: 0; margin-inline-start: 2px; }
.pcards .yrn { margin-top: 6px; font-size: 16px; color: var(--pcd-ink-2); }
.pcards .setup { margin-top: 10px; font-size: 19px; color: var(--pcd-ink); }
.pcards .plus { font: 600 14px/1.4 var(--pcd-f-ui); color: var(--pcd-ink); padding-bottom: 8px; align-self: end; }
.pcards .notes { font: 400 13.5px/1.5 var(--pcd-f-ui); color: var(--pcd-ink-3); }
.pcards .notes p + p { margin-top: 2px; }
@media (max-width: 760px) {
  #pricing .bill-tg { display: flex; width: 100%; }   /* mock .seg: full-width toggle on mobile (landing only) */
  #pricing .bill-tg button { flex: 1; justify-content: center; padding: 0 10px; }
  .pcards .plus:empty { display: none; }
  .pcards .price .big { font-size: 56px; }
  .pcards .both b { display: block; margin-bottom: 4px; }
  .pcards .both .dot { display: none; }
  .pcards .both .i { display: grid; grid-template-columns: 16px minmax(0, 1fr); }
  .pcards .both .i::before { content: '–'; color: var(--pcd-ink-3); }
  .pcards .both .t { display: block; min-width: 0; overflow-wrap: break-word; }
  .pcards .both .t::first-letter { text-transform: uppercase; }
  .pcards .cards { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 24px; }
  .pcards .card { grid-row: auto; grid-template-rows: none; display: block; padding: 18px 18px 20px; }
  .pcards .name { font-size: 30px; }
  .pcards .sub { font-size: 18px; }
  .pcards .row { grid-template-columns: 52% 1fr; gap: 12px; font-size: 15.5px; }
  .pcards .under { gap: 12px; }
}