/* Pricing and policy pages (D73). Builds on tokens.css and site.css; logical properties so the same rules serve
   the Arabic (rtl) and English (ltr) pages. */
.pg-nav .nav-links { display: flex; gap: var(--s4); flex-wrap: wrap; }
.pg-nav .nav-in { height: auto; min-height: 68px; padding-block: 10px; flex-wrap: wrap; }
.pg-lang { font-size: var(--fs-sm); font-weight: 600; color: var(--navy); text-decoration: none; border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 4px 12px; }
.pg-lang:hover { background: var(--mist-2); }
.pg-head { padding: var(--s8) 0 var(--s6); }
.pg-head h1 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); }
.pg-head .lead { margin-top: var(--s3); }
.pg-meta { margin-top: var(--s3); font-size: var(--fs-sm); color: var(--ink-3); }

/* Launch offer banner */
.offer { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4) var(--s5); border-radius: var(--r-md); background: var(--attn-bg); color: var(--attn); border: 1px solid #efd8b0; margin-bottom: var(--s6); }
.offer b { color: var(--ink); }
.offer .old { text-decoration: line-through; color: var(--ink-3); }

/* Plans */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--s5); }
.plan { padding: var(--s6); display: flex; flex-direction: column; gap: var(--s4); position: relative; }
.plan.is-rec { border: 2px solid var(--navy); }
.plan-badge { position: absolute; top: -13px; inset-inline-start: var(--s6); background: var(--navy); color: var(--white); font-size: var(--fs-xs); font-weight: 600; padding: 3px 12px; border-radius: var(--r-pill); }
.plan h2 { font-size: var(--fs-xl); }
.price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.price .amt { font-size: 2.5rem; font-weight: 700; color: var(--navy); line-height: 1; font-variant-numeric: tabular-nums; }
.price .per { color: var(--ink-3); font-size: var(--fs-sm); }
/* D528: the old figure struck in red beside what he pays (as the email's price box, D420) */
.price .was { color: var(--ink-3); font-size: 1.25rem; text-decoration: line-through; text-decoration-color: var(--danger); text-decoration-thickness: 2px; }
.founding { font-size: var(--fs-sm); background: var(--ok-bg); color: var(--ok); border-radius: var(--r-sm); padding: 8px 12px; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); }
.ticks li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 4px; border-radius: 50%; background: var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c447c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat; }
.plan .btn { margin-top: auto; }

.both { margin-top: var(--s7); padding: var(--s6); }
.pg-head + .both { margin-top: 0; }
.both + .plans { margin-top: var(--s5); }
.both h2, .setup h2 { font-size: var(--fs-xl); margin-bottom: var(--s4); }
.both .ticks { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.setup { margin-top: var(--s5); padding: var(--s6); display: grid; gap: var(--s3); }

/* Policy documents */
.doc { max-width: 760px; padding-bottom: var(--s9); }
.doc h2 { font-size: var(--fs-xl); margin: var(--s7) 0 var(--s3); }
.doc h3 { font-size: var(--fs-lg); margin: var(--s5) 0 var(--s2); }
.doc p, .doc li { color: var(--ink-2); }
.doc ul, .doc ol { padding-inline-start: 1.4em; display: grid; gap: 6px; }
.doc .note { padding: var(--s4) var(--s5); background: var(--mist-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.doc table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin-top: var(--s3); }
.doc th, .doc td { text-align: start; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { color: var(--ink); background: var(--mist-2); }
.faq { margin-top: var(--s7); max-width: 760px; }
.faq h2 { font-size: var(--fs-xl); margin-bottom: var(--s3); }
.faq details { border-bottom: 1px solid var(--line); padding: var(--s3) 0; }
.faq summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.faq details p { margin: var(--s2) 0 0; color: var(--ink-2); }
.num, .ltr { direction: ltr; unicode-bidi: isolate; }
.pg-foot .foot-in { display: grid; gap: var(--s3); }
.pg-foot nav { display: flex; flex-wrap: wrap; gap: var(--s4); }
.pg-foot nav a { color: var(--ink-2); text-decoration: none; font-size: var(--fs-sm); }
.pg-foot nav a:hover { color: var(--navy); }
@media (max-width: 640px) { .pg-nav .nav-links { gap: var(--s3); font-size: var(--fs-xs); } .plan { padding: var(--s5); } }