/* Packages page (/packages) — cards grid, highlighted package, custom card. Uses the tokens from styles.css. */
.pkgs .shead{padding-top:clamp(50px,7vw,96px)}
.pkg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px;align-items:stretch}
.pkg{position:relative;display:flex;flex-direction:column;min-width:0;border:1.5px solid var(--ink);background:var(--panel);padding:24px 24px 26px;scroll-margin-top:84px}
.pkg.is-hot{border-color:var(--red);box-shadow:0 0 0 1.5px var(--red)}
.pkg:target{box-shadow:0 0 0 3px var(--red)}

/* "Most requested" strip on the highlighted card */
.pkg-flag{margin:-24px -24px 20px;padding:10px 24px;background:var(--red);color:#fff;font-family:var(--mono);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.pkg-flag span{margin-inline-end:4px}

.pkg-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink45)}
.pkg-n{color:var(--red);font-weight:700;font-size:13px}
.pkg-svc{text-align:end}
.pkg-t{font-weight:900;font-size:clamp(24px,2.3vw,34px);line-height:.98;letter-spacing:-.02em;text-transform:uppercase;margin-top:18px;overflow-wrap:anywhere}
.pkg-tag{font-size:17px;line-height:1.45;font-weight:600;margin-top:12px}
.pkg .k{display:block;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink45);font-weight:500}
.pkg-for{margin-top:18px;padding-top:14px;border-top:1.5px solid var(--line)}
.pkg-for p{color:var(--ink70);font-size:15px;line-height:1.55;margin-top:6px}
.pkg-for .k+p{margin-top:6px}
.pkg-inc{margin-top:18px}
.pkg .incl{grid-template-columns:1fr;margin-top:6px}
.pkg .incl li{font-size:15px;line-height:1.45;padding-block:10px}
.pkg .incl li::before{top:20px}
.pkg .incl li:last-child{border-bottom:0}

.pkg-acts{margin-top:auto;padding-top:22px;display:flex;flex-direction:column;align-items:stretch;gap:14px}
.pkg-acts .btn{justify-content:center;min-height:48px;text-align:center}
.btn-red{background:var(--red);border-color:var(--red);color:#fff}
.btn-red:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pkg-more{align-self:center;font-family:var(--mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink70);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:5px;padding:6px 2px;text-align:center}
.pkg-more:hover{color:var(--red)}

/* "Need something custom?" card */
.pkg--custom{background:transparent;border-style:dashed;border-color:var(--ink70)}
.pkg--custom .pkg-n{letter-spacing:0}
.pkg--custom .pkg-t{color:var(--ink)}
.pkg--custom .pkg-for{border-top:0;padding-top:0}
.pkg--custom .pkg-for p{font-size:16px}

/* Arabic */
html[dir=rtl] .pkg-t{line-height:1.3}
html[dir=rtl] .pkg .k,html[dir=rtl] .pkg-top,html[dir=rtl] .pkg-flag,html[dir=rtl] .pkg-more{font-size:14px}
html[dir=rtl] .pkg-tag{line-height:1.6}

@media(max-width:1100px){.pkg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  .pkg-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .pkg{padding:20px 18px 22px}
  .pkg-flag{margin:-20px -18px 18px;padding-inline:18px}
  .pkg-tag{font-size:16px}
}
