/* ─────────────────────────────────────────────────────────────────────────
   pricing/v3 — plan comparison. ALL rules scoped under .pv3 (on .entry-content)
   so nothing leaks to pages that share style3.css.

   The PLAN GRID (section B) is a straight port of app.dafkesher.net's buy_pdf01:
     · markup + class names  — public/buy_pdf01.html
     · grid / card / feature CSS — public/css/dkapp.css:6089+
     · ≤1280px stacking + the .whats-in collapse — public/css/dkresponsive.css:2046+
   Keep the class names identical to buy_pdf01's so the next port is a diff, not
   a translation. Deviations are marked "DIFF:" and are only: the CTA text/target
   and the legal fixes buy_pdf01 does not carry.

   The studio column and the two studio popups were removed on 2026-08-25 when the
   tier was retired; ../../studio-lb.{php,css,js} went with them.

   Tokens: DESIGN.md — purple #646CD2, ink #202630, muted #6F727F,
   radius 13px, signature shadow 0 20px 36px #2B2F6433.
   url() paths are relative to THIS file, i.e. ../../images/…
   ───────────────────────────────────────────────────────────────────────── */
.pv3{
  --pv3-purple:#646CD2; --pv3-purple-1a:#646CD21A; --pv3-purple-20:#646CD220; --pv3-purple-4d:#646CD24D;
  /* #646CD2 on the 10% purple tint is 4.04:1 — AA-large only. Darkened token (4.6:1) for
     BODY-SIZE purple on a tinted panel. */
  --pv3-purple-panel:#5A62CB;
  --pv3-ink:#202630; --pv3-muted:#6F727F;
  /* #6F727F on the #F4F5FA panel is 4.39:1 — below AA. Darkened token for panel text only. */
  --pv3-muted-panel:#5F6270;
  /* Legal disclosures must not be the quietest thing on the page — darker than muted. */
  --pv3-legal-ink:#676b7e;
  --pv3-surface:#F4F5FA;
  --pv3-radius:13px;          /* component radius (images, small surfaces) */
  --pv3-radius-card:20px;     /* plan card — matches dkapp .pricing-card */
  --pv3-radius-panel:30px;    /* large panel — matches the site's .pdf-box-int */
  --pv3-shadow:0 20px 36px #2B2F6433;        /* the site signature (.pr-info, .printopt-2) */
}

/* ── A · lede ───────────────────────────────────────────────────────────── */
.pv3-lede{max-width:760px;margin:0 auto;text-align:center}

/* Two columns since the studio tier was retired on 2026-08-25. 762px is what the old
   1160px three-up grid gave each card (364px) plus one 34px gap, so the cards kept their
   size and only the count changed. */
.pv3 .pricing-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:34px;
  align-items:start;max-width:762px;margin:96px auto 0}
.pv3 .pricing-column{position:relative}
/* dkapp.css:6139 — hidden on desktop, revealed at ≤1280px (dkresponsive.css:2072) */
.pv3 .whats-in{display:none}


.pv3 .pricing-card{background:#fff;border:2px solid transparent;border-radius:var(--pv3-radius-card);
  box-shadow:0 8px 32px rgba(43,47,100,.15);overflow:hidden;height:100%;
  display:flex;flex-direction:column;transition:box-shadow .3s ease}
.pv3 .pricing-card:hover{box-shadow:0 16px 48px rgba(43,47,100,.4)}
.pv3 .pricing-basic .pricing-card{border-color:#E0E4E7}
/* חינם is the quietest card: same neutral border as בייסיק, no raise, no badge. Its price slot
   holds a WORD, not a ₪ amount, so it cannot take .price-number's 3.5em without dwarfing the
   two real prices beside it. */
.pv3 .pricing-free .pricing-card{border-color:#E0E4E7}
.pv3 .pricing-free .price-number{font-size:2.2em}
.pv3 .pricing-free .pv3-free-when{margin:14px 0 0;font-size:.85em;line-height:1.5em;
  color:var(--pv3-muted);text-align:center}

.pv3 .pricing-header{padding:40px 30px 30px;text-align:center;
  background:linear-gradient(135deg,#f8f9ff 0%,#fff 100%)}
.pv3 h3.package-name{font-size:1.4em;font-weight:700;line-height:1.3em;margin:0 0 20px;color:var(--pv3-ink)}
.pv3 .package-price{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  margin-bottom:15px;line-height:1;direction:ltr}
.pv3 .currency{font-size:2em;font-weight:600;margin-left:5px;color:var(--pv3-purple)}
.pv3 .price-number{font-size:3.5em;font-weight:800;color:var(--pv3-purple)}
.pv3 .package-desc{font-size:.95em;line-height:1.4em;color:#666;margin:0}

.pv3 .pricing-body{padding:0 30px 40px;flex:1;display:flex;flex-direction:column}
.pv3 .pricing-body strong{font-weight:700}
.pv3 .pricing-cta{margin-bottom:30px}
.pv3 .pricing-cta .btn{width:100%}
.pv3 .pricing-cta .btn a{box-sizing:border-box;width:100%;padding:15px 20px;font-size:1em;
  font-weight:700;justify-content:center;box-shadow:0 10px 24px var(--pv3-purple-4d)}
/* .btn.btn-arrow's chevron is position:absolute;left:14px (style3.css:446) — correct for
   shrink-wrapped buttons, wrong for a full-width centred one (the glyph drifts far from the
   label). Ride it INLINE instead; .btn a is already flex+center so a static ::after lands at
   the left end in RTL. Same fix the app made at dkapp.css:8145. */
.pv3 .pricing-cta .btn.btn-arrow a{padding-left:20px}
.pv3 .pricing-cta .btn.btn-arrow a:after{position:static;margin-top:0;margin-inline-start:8px;flex:0 0 auto}

.pv3 .features-list{flex:1}   /* pushes the foot link down so all cards align */
.pv3 .feature-item{display:flex;align-items:flex-start;margin-bottom:16px;line-height:1.4em}
.pv3 .feature-item:last-child{margin-bottom:0}
.pv3 .feature-icon{flex-shrink:0;width:20px;height:20px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:.8em;font-weight:700;
  margin-left:12px;margin-top:2px;background:#E8F5E8;color:#2E7D32}
.pv3 .feature-text{font-size:.95em;line-height:1.4em;color:#333}
.pv3 .feature-text a{color:var(--pv3-purple);font-weight:700;text-decoration:underline}
/* ── D · fine print ──────────────────────────────────────────────────────── */
.pv3-fine{max-width:820px;margin:34px auto 0;text-align:center}
.pv3-fine p{font-size:.82em;line-height:1.65em;color:var(--pv3-muted);margin:0 0 8px}
.pv3-fine strong{font-weight:700;color:var(--pv3-ink)}
.pv3-fine .comstar{color:var(--pv3-purple)}

/* ── F · explainers ──────────────────────────────────────────────────────── */
.pv3-explain{max-width:760px;margin:96px auto 0}
.pv3 .pv3-explain h2{font-size:1.35em;font-weight:700;margin:44px 0 14px;scroll-margin-top:24px}
.pv3 .pv3-explain h2:first-child{margin-top:0}
.pv3-explain p{font-size:.95em;line-height:1.7em;margin-bottom:10px}
.pv3 .pv3-explain ul{margin:14px 20px 26px}
.pv3-explain li{list-style-type:disc;margin-bottom:8px;line-height:1.65em;font-size:.95em}
.pv3-explain a{color:var(--pv3-purple);text-decoration:underline}

/* ── G · final CTA ───────────────────────────────────────────────────────── */
.pv3-final{text-align:center;margin:56px auto 0}
.pv3-final .btn-row{justify-content:center}
.pv3-final .btn-row .btn{margin-left:0}   /* style3.css:387 offsets a single centred button by 10px */
.pv3-final .btn a{padding:14px 40px 14px 58px;font-size:1.05em}
.pv3-final .pv3-final-sub{font-size:.85em;color:var(--pv3-muted);margin-top:14px}

/* ── responsive ─────────────────────────────────────────────────────────────
   DIFF vs the previous v3 build: the plan grid now collapses at ≤1280px, matching
   buy_pdf01 (dkresponsive.css:2046) rather than the site's usual 768/1024. */
@media only screen and (max-width:1280px){
  .pv3 .pricing-grid{display:flex;flex-direction:column;gap:40px;max-width:500px;margin:40px auto 0}
  .pv3 .pricing-column{max-width:none}
  /* Basic's feature list collapses behind "מה זה כולל?" (dkresponsive.css:2072-2089) */
  .pv3 .whats-in{display:block;text-align:center}
  .pv3 .whats-in a{color:var(--pv3-purple);font-weight:700;text-decoration:none}
  .pv3 .pricing-basic .features-list{max-height:0;transition:all .5s ease;overflow:hidden}
  .pv3 .pricing-basic .features-list.expanded{max-height:2000px;margin-top:1.5em;margin-bottom:-1em}
  /* Stacked, the columns run LOW→HIGH — which is simply DOM order (free → basic). */
  .pv3-explain{margin-top:72px}
}
@media only screen and (max-width:768px){
  .pv3 .pricing-grid{max-width:440px}
  .pv3 .pricing-header{padding:34px 24px 26px}
  .pv3 .pricing-body{padding:0 24px 32px}
}
@media only screen and (max-width:600px){
  /* body drops to 15px here (responsive3.css:529) — everything em-based follows */
  .pv3 .pricing-header{padding:30px 20px 24px}
  .pv3 .pricing-body{padding:0 20px 30px}
  .pv3 .price-number{font-size:3.1em}
  .pv3-final .btn a{padding:14px 24px}
}