/* ============================================================
   MOEDATECH  ·  /packages              pkg.css        2026-09-23

   Loads AFTER docs.css and only adds what docs.css has no
   vocabulary for: a four-up price card grid and a comparison
   table. Everything else on the page - the hero, the section
   rhythm, .doc-defs, .doc-meta - is docs.css doing its job.

   Written with LOGICAL properties throughout, like docs.css, so
   the Arabic locale mirrors without a single RTL override. The
   one exception is marked where it appears.
   ============================================================ */

/* ---- the cards -------------------------------------------- */

.pkg .pkg-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  align-items: stretch;
}

.pkg .pkg-card {
  display: flex;
  flex-direction: column;
  background: var(--d-card);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r);
  padding: clamp(20px, 2vw, 26px);
}

/* Enterprise. Hisham confirmed "most popular", so it gets the one
   emphasis on the page - a darker frame, not a different colour. */
.pkg .pkg-card--lead {
  border-color: var(--d-ink);
  box-shadow: 0 1px 0 var(--d-ink) inset, 0 0 0 1px var(--d-ink);
}

.pkg .pkg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 26px;
  margin-block-end: 14px;
}

.pkg .pkg-head h3 {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--d-ink);
}
[lang="ar"] .pkg .pkg-head h3 { letter-spacing: 0; }

/* the saving the app shows */
.pkg .pkg-off {
  flex: none;
  font-size: .76rem;
  font-weight: 700;
  line-height: 1;
  padding: 5px 9px;
  border-radius: var(--d-pill);
  color: #fff;
  background: var(--d-acc-d);          /* white on this is 4.9:1 */
}

.pkg .pkg-flag {
  flex: none;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: var(--d-pill);
  color: #fff;
  background: var(--d-ink);
}
[lang="ar"] .pkg .pkg-flag { letter-spacing: 0; text-transform: none; font-size: .76rem; }

.pkg .pkg-price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.pkg .pkg-price b {
  font-size: clamp(1.7rem, 2.4vw, 2.1rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--d-ink);
}

.pkg .pkg-cur { font-size: .92rem; font-weight: 600; color: var(--d-soft); }

/* the old price. Kept at Hisham's instruction, 2026-09-23, with no end
   date; see the warning at the top of build_packages.py. */
.pkg .pkg-price s {
  font-size: .92rem;
  font-weight: 500;
  color: var(--d-mut);
  text-decoration-thickness: 1px;
}

.pkg .pkg-term {
  margin: 6px 0 0;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--d-mut);
}
[lang="ar"] .pkg .pkg-term { line-height: 1.8; }

.pkg .pkg-feats {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  /* grows so the button sits on the card's bottom edge whatever the card's
     height - but align-content keeps the ROWS at their natural spacing.
     Without it a three-item card spreads its three lines over the same height
     as a five-item one, and the lists stop reading as one list. */
  flex: 1 1 auto;
  align-content: start;
}

.pkg .pkg-feats li {
  position: relative;
  padding-inline-start: 22px;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--d-soft);
}
[lang="ar"] .pkg .pkg-feats li { line-height: 1.85; }

/* the tick, drawn in CSS so it needs no font and no image */
.pkg .pkg-feats li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  inset-block-start: .46em;
  width: 9px;
  height: 5px;
  border-inline-start: 1.6px solid var(--d-acc-d);
  border-block-end: 1.6px solid var(--d-acc-d);
  transform: rotate(-45deg);
}
/* the ONE thing that cannot be logical: a rotated glyph mirrors with the
   page, so the tick would point the wrong way in Arabic. */
[dir="rtl"] .pkg .pkg-feats li::before { transform: rotate(-45deg) scaleX(-1); }

.pkg .pkg-btn {
  display: block;
  margin-block-start: 18px;
  padding: 11px 16px;
  border-radius: var(--d-pill);
  background: var(--d-ink);
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: .92rem;
  font-weight: 600;
  transition: background-color .16s var(--d-ease), transform .16s var(--d-ease);
}
.pkg .pkg-btn:hover,
.pkg .pkg-btn:focus-visible { background: var(--d-acc-d); transform: translateY(-1px); }

.pkg .pkg-note {
  margin: clamp(16px, 2vw, 22px) 0 0;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--d-mut);
  max-width: 62ch;
}
[lang="ar"] .pkg .pkg-note { line-height: 1.9; }

/* The two inline links on this page (compliance, and the app's package screen)
   sit inside .doc-defs, which docs.css does not style links in - they came out
   as default browser blue on cream. */
.pkg .doc-defs a {
  color: var(--d-acc-d);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.pkg .doc-defs a:hover { text-decoration-thickness: 2px; }

/* ---- the comparison table --------------------------------- */

.pkg .pkg-scroll { margin-block-start: clamp(16px, 2vw, 24px); overflow-x: auto; }

.pkg .pkg-cmp {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  min-width: 620px;
}

.pkg .pkg-cmp th,
.pkg .pkg-cmp td {
  padding: 11px 12px;
  text-align: start;
  border-block-end: 1px solid var(--d-line);
  vertical-align: middle;
}

.pkg .pkg-cmp thead th {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--d-mut);
  border-block-end: 1.5px solid var(--d-line);
}
[lang="ar"] .pkg .pkg-cmp thead th { letter-spacing: 0; text-transform: none; font-size: .88rem; }

.pkg .pkg-cmp tbody th {
  font-weight: 500;
  color: var(--d-ink);
  width: 32%;
}

.pkg .pkg-cmp td { text-align: center; color: var(--d-soft); }
.pkg .pkg-cmp thead th:not(:first-child) { text-align: center; }

/* Enterprise's column, tied to the card that carries the same emphasis */
.pkg .pkg-cmp .lead { background: var(--d-sunk); }
.pkg .pkg-cmp thead th.lead { color: var(--d-ink); }

.pkg .pkg-cmp td.y span { color: var(--d-acc-d); font-weight: 700; }
.pkg .pkg-cmp td.n span { color: var(--d-mut); opacity: .55; }

/* "+" and "−" are shapes, not words: the real label sits beside them for a
   screen reader and is never painted. */
.pkg .pkg-cmp td i {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- narrower ---------------------------------------------- */

@media (max-width: 1040px) {
  .pkg .pkg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .pkg .pkg-grid { grid-template-columns: minmax(0, 1fr); }
  .pkg .pkg-card { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .pkg .pkg-btn { transition: none; }
  .pkg .pkg-btn:hover, .pkg .pkg-btn:focus-visible { transform: none; }
}