/* AME FX CAPITAL - Private Membership page only. Loaded after portal.css.
   One luxury metal membership card: an aged champagne-gold body with a brushed finish and a
   soft reflection, the title engraved on the metal, and a very dark inner vault that holds
   the figure, the five privileges and the key. Local only: nothing is fetched. */

.ms-page {
  --aged-hi: #E6D3A3;
  --aged: #C4A266;
  --aged-lo: #8A6C3C;
  --engrave: #23190A;
  --hair: rgba(196, 162, 102, .30);
  --hair-soft: rgba(196, 162, 102, .14);
  --serif-book: "Palatino Linotype", "Book Antiqua", "Cormorant Garamond", Georgia, serif;
}

/* ── light and texture ── */
.ms-light { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 46% at 50% 50%, rgba(196,162,102,.08), transparent 72%),
    radial-gradient(120% 90% at 50% 50%, transparent 52%, rgba(0,0,0,.8) 100%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.008) 0 2px, transparent 2px 5px); }


.ms-page .top, .ms-main, .ms-page .foot { position: relative; z-index: 1; }
.ms-page .top { padding-top: 14px; padding-bottom: 10px; }
.ms-main { width: 100%; max-width: 960px; margin: 0 auto; padding: 4px 32px 30px; }

/* ── the page heading: clear, not small ── */
.ms-heading { text-align: center; }
.ms-eyebrow { margin: 0; font-size: 12px; letter-spacing: .48em; color: var(--aged); }
.ms-house { margin: 8px 0 0; font-family: var(--serif-book); font-size: 30px; letter-spacing: .2em; line-height: 1.15;
  background: linear-gradient(180deg, #EFE2BF 0%, var(--aged) 65%, var(--aged-lo) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ms-tagline { margin: 6px 0 0; font-family: var(--serif-book); font-style: italic; font-size: 17px; letter-spacing: .05em; color: var(--ink-2); }

/* ── the card: aged champagne metal ── */
.plan.ms-card { max-width: 860px; margin: 18px auto 0; padding: 20px 22px 22px; text-align: left; position: relative;
  border-radius: 16px; border: 1px solid rgba(255,236,190,.55);
  background:
    radial-gradient(90% 70% at 16% 0%, rgba(255,248,226,.32), transparent 48%),
    radial-gradient(60% 60% at 100% 100%, rgba(40,28,10,.35), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, rgba(0,0,0,.035) 1px 3px),
    linear-gradient(135deg, #5C4828 0%, #957A47 16%, #C7AA73 34%, #DCC696 48%, #C2A36A 62%, #957844 80%, #5A4626 100%);
  box-shadow: 0 28px 64px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,250,232,.55), inset 0 -1px 0 rgba(60,44,18,.6); }
.plan.ms-card::before { content: ""; position: absolute; inset: 7px; left: 7px; right: 7px; top: 7px; height: auto;
  border-radius: 11px; border: 1px solid rgba(58,42,18,.35); background: none; pointer-events: none; }

/* engraved on the metal: crest, badge, title */
.ms-card-head { display: flex; align-items: center; gap: 18px; padding: 4px 10px 16px; }
.ms-crest { width: 54px; flex: none; filter: drop-shadow(0 3px 6px rgba(40,28,10,.55)); }
.ms-badge { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .4em; color: rgba(35,25,10,.72); }
.ms-card h1.ms-plan { margin: 6px 0 0; font-family: var(--serif-book); font-weight: 400; font-size: 23px; letter-spacing: .2em;
  line-height: 1.3; color: var(--engrave); text-shadow: 0 1px 0 rgba(255,246,222,.55); }

/* the vault: a very dark inner panel so every word stays legible */
.ms-vault { display: grid; grid-template-columns: .9fr 1.35fr; border-radius: 11px; overflow: hidden;
  border: 1px solid rgba(214,186,128,.38);
  background: linear-gradient(180deg, rgba(14,12,8,.95), rgba(6,5,4,.97));
  box-shadow: inset 0 1px 0 rgba(255,240,205,.06), 0 1px 0 rgba(255,246,222,.35); }
.ms-offer { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 26px 20px; border-inline-end: 1px solid var(--hair-soft);
  background: radial-gradient(70% 60% at 50% 45%, rgba(196,162,102,.08), transparent 75%); }
.ms-card .plan-rate { margin: 0; display: block; }
.ms-card .plan-rate .amount { display: block; direction: ltr; unicode-bidi: isolate; font-family: var(--serif-book); font-weight: 400;
  font-size: 58px; line-height: 1; letter-spacing: .03em;
  background: linear-gradient(180deg, #EEE1BE 0%, var(--aged) 70%, #A88A54 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ms-sub { margin: 16px 0 0; font-size: 10.5px; letter-spacing: .4em; color: var(--ink-3); }

.ms-privileges { padding: 18px 26px 22px; }
.ms-features { list-style: none; margin: 0 0 16px; padding: 0; text-align: start; }
.ms-features li { display: flex; align-items: center; gap: 14px; padding: 8px 0; font-size: 14.5px; color: var(--ink); position: relative; }
.ms-features li + li::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, var(--hair), var(--hair-soft) 70%, transparent); }
.ms-features svg { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--aged); stroke-width: 1;
  stroke-linejoin: round; stroke-linecap: round; }

/* the key: aged gold leaf, a fine inner rule, one slow sheen; hover only brightens */
.ms-card #continue-payment.btn.solid.large { position: relative; overflow: hidden; width: 100%; min-height: 48px;
  border-radius: 2px; border: 1px solid #6E5530; color: #1A140A; font-size: 11.5px; font-weight: 600; letter-spacing: .24em;
  white-space: nowrap; padding: 0 14px;
  background: linear-gradient(180deg, #E8D7AA 0%, #CFAE70 40%, #B48F55 72%, #977643 100%);
  box-shadow: inset 0 0 0 1px rgba(255,246,222,.32), inset 0 1px 0 rgba(255,250,235,.65), 0 8px 20px rgba(0,0,0,.4);
  transition: filter .6s var(--ease), box-shadow .6s var(--ease); }
.ms-card #continue-payment::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 26%;
  background: linear-gradient(100deg, transparent, rgba(255,250,235,.24), transparent); transform: skewX(-18deg);
  animation: ms-sheen 10s ease-in-out infinite; pointer-events: none; }
.ms-card #continue-payment:hover { filter: brightness(1.05);
  box-shadow: inset 0 0 0 1px rgba(255,246,222,.45), inset 0 1px 0 rgba(255,250,235,.75), 0 9px 22px rgba(0,0,0,.45); }
@keyframes ms-sheen { 0%, 72% { left: -40%; } 100% { left: 120%; } }
.ms-card .pending { margin-top: 12px; padding: 12px 14px; border-radius: 2px; border-color: var(--hair); background: rgba(196,162,102,.05); }
.ms-card .pending-title { color: var(--aged-hi); letter-spacing: .34em; font-size: 10.5px; }
.ms-card .pending-line { font-size: 13px; }

/* ── the small print, under the card ── */
.ms-terms { margin: 18px auto 0; max-width: 760px; text-align: center; }
.ms-terms h2 { margin: 0 0 6px; font-size: 10.5px; font-weight: 500; letter-spacing: .46em; color: var(--aged-lo); }
.ms-terms p { margin: 0; font-size: 11.5px; line-height: 1.75; color: var(--ink-3); }
.ms-nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 12px; }
.ms-nav a { font-size: 10.5px; letter-spacing: .4em; color: var(--ink-2); padding: 4px 0; border-bottom: 1px solid transparent;
  transition: color .5s var(--ease), border-color .5s var(--ease); }
.ms-nav a:hover { color: var(--aged-hi); border-bottom-color: var(--hair); }
.ms-nav span { font-size: 10px; display: inline-block; transform: scale(.6); color: var(--aged-lo); }

/* ── tablet ── */
@media (max-width: 980px) {

}
/* ── phone: one golden column ── */
@media (max-width: 600px) {
  .ms-page .top { flex-direction: row; align-items: center; padding: 12px 16px; }
  .ms-page .top .btn.small { width: auto; min-height: 32px; padding: 0 12px; font-size: 10px; letter-spacing: .16em; white-space: nowrap; }
  .ms-page .brand .name { font-size: 12px; letter-spacing: .22em; }
  .ms-page .brand .name small { display: none; }

  .ms-main { padding: 0 14px 24px; }
  .ms-eyebrow { font-size: 10px; letter-spacing: .42em; }
  .ms-house { font-size: 22px; letter-spacing: .16em; }
  .ms-tagline { font-size: 14px; }
  .plan.ms-card { margin-top: 12px; padding: 14px 12px 12px; border-radius: 14px; }
  .ms-card-head { flex-direction: column; text-align: center; gap: 8px; padding: 2px 6px 12px; }
  .ms-crest { width: 40px; }
  .ms-badge { font-size: 10px; letter-spacing: .3em; }
  .ms-card h1.ms-plan { font-size: 14px; letter-spacing: .08em; margin-top: 4px; white-space: nowrap; }
  .ms-vault { grid-template-columns: 1fr; }
  .ms-offer { padding: 18px 16px 16px; border-inline-end: 0; border-bottom: 1px solid var(--hair-soft); }
  .ms-card .plan-rate .amount { font-size: 50px; }
  .ms-sub { margin-top: 10px; letter-spacing: .32em; }
  .ms-privileges { padding: 10px 16px 16px; }
  .ms-features { margin-bottom: 12px; }
  .ms-features li { padding: 7px 0; font-size: 13.5px; }
  .ms-card #continue-payment.btn.solid.large { letter-spacing: .14em; min-height: 46px; }
  .ms-nav { gap: 14px; }
  .ms-nav a { letter-spacing: .3em; }
}
@media (prefers-reduced-motion: reduce) {
  .ms-card #continue-payment::after { animation: none !important; display: none; }
}

/* languages on this page */
[lang="ar"] .ms-page { --serif-book: "Segoe UI", Tahoma, Arial, sans-serif; }
[lang="ar"] .ms-tagline { font-style: normal; }
[lang="ar"] .ms-badge, [lang="ar"] .ms-sub, [lang="ar"] .ms-terms h2, [lang="ar"] .ms-nav a, [lang="ar"] .ms-eyebrow { font-size: 13px; }
[lang="ar"] .ms-terms p { font-size: 13px; }
[lang="ar"] .ms-card h1.ms-plan { font-size: 24px; }
[lang="ar"] .ms-card .plan-rate .amount { font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif; }
[dir="rtl"] .ms-features li + li::before { background: linear-gradient(270deg, var(--hair), var(--hair-soft) 70%, transparent); }
@media (max-width: 600px) {
  .ms-page .top { flex-wrap: wrap; row-gap: 8px; }
  .ms-page .top .top-right { flex: 1 1 100%; justify-content: space-between; }
  [lang="de"] .ms-card h1.ms-plan { white-space: normal; }
  [lang="ar"] .ms-card h1.ms-plan { font-size: 19px; }
}
/* right to left: the sheen hangs off the end side, so it never counts as cut text */
[dir="rtl"] .ms-card #continue-payment::after { left: auto; right: -40%; animation-name: ms-sheen-rtl; }
@keyframes ms-sheen-rtl { 0%, 72% { right: -40%; } 100% { right: 120%; } }
/* the payment key: smaller, slimmer, softer (owner 2026-10-05) */
.ms-card #continue-payment.btn.solid.large { min-height: 40px; height: 40px; font-size: 10.5px; letter-spacing: .22em; font-weight: 600;
  background: linear-gradient(180deg, #E6D6AC 0%, #D0B27A 55%, #B79A63 100%);
  box-shadow: inset 0 0 0 1px rgba(255,246,222,.25), inset 0 1px 0 rgba(255,250,235,.5), 0 4px 12px rgba(0,0,0,.3); }
.ms-card #continue-payment::after { background: linear-gradient(100deg, transparent, rgba(255,250,235,.14), transparent); }
@media (max-width: 600px) { .ms-card #continue-payment.btn.solid.large { min-height: 42px; height: 42px; letter-spacing: .14em; } }
/* the payment key as long as its words, and slimmer (owner 2026-10-05) */
.ms-card #continue-payment.btn.solid.large { display: flex; width: fit-content; max-width: 100%; margin-inline: auto;
  min-height: 36px; height: 36px; padding: 0 28px; font-size: 10.5px; letter-spacing: .22em; }
@media (max-width: 600px) { .ms-card #continue-payment.btn.solid.large { min-height: 40px; height: 40px; padding: 0 22px; letter-spacing: .14em; } }
/* slim payment key (owner 2026-10-05) */
.ms-card #continue-payment.btn.solid.large { min-height: 34px; height: 34px; font-size: 10px; font-weight: 500; letter-spacing: .22em; }
@media (max-width: 600px) { .ms-card #continue-payment.btn.solid.large { min-height: 38px; height: 38px; letter-spacing: .14em; } }

@media (max-width: 600px) { [lang="ru"] .ms-card h1.ms-plan { white-space: normal; } }

/* slim payment key - only a little taller than its words */
.ms-card #continue-payment.btn.solid.large { min-height: 30px; height: 30px; padding: 0 22px; font-size: 10px; letter-spacing: .2em; line-height: 1; }
@media (max-width: 600px) { .ms-card #continue-payment.btn.solid.large { min-height: 34px; height: 34px; } }

/* Arabic on this page: the same classical naskh, rebalanced sizes */
[lang="ar"] .ms-page { --serif-book: "Sakkal Majalla", "Traditional Arabic", serif; }
[lang="ar"] .ms-eyebrow, [lang="ar"] .ms-badge, [lang="ar"] .ms-sub, [lang="ar"] .ms-terms h2, [lang="ar"] .ms-nav a { font-size: 19px; font-weight: 700; }
[lang="ar"] .ms-tagline { font-size: 24px; }
[lang="ar"] .ms-card h1.ms-plan { font-size: 32px; font-weight: 700; }
[lang="ar"] .ms-features li { font-size: 21px; }
[lang="ar"] .ms-terms p { font-size: 19px; }
[lang="ar"] .ms-card .pending-title { font-size: 19px; }
[lang="ar"] .ms-card .pending-line { font-size: 20px; }
[lang="ar"] .ms-card #continue-payment.btn.solid.large { font-size: 18px; font-weight: 700; height: 34px; min-height: 34px; }
@media (max-width: 600px) { [lang="ar"] .ms-card h1.ms-plan { font-size: 26px; } }

/* owner 2026-10-05: the whole card is gold, every word and the price cut into the metal,
   a touch heavier; the card is smaller and the privileges list is gone.
   Engraving = a darker gold fill, a dark edge above (the cut's shadow) and a light edge
   below (the lip of the metal catching the light). */
.ms-page { --cut: #4A3716; --cut-hi: rgba(255,244,214,.55); --cut-lo: rgba(40,27,8,.55); }
.plan.ms-card { max-width: 560px; padding: 18px 20px 22px; }
.ms-card-head { justify-content: center; text-align: center; flex-direction: column; gap: 10px; padding: 6px 10px 6px; }
.ms-crest { width: 50px; }
.ms-badge, .ms-card h1.ms-plan, .ms-card .plan-rate .amount, .ms-card .pending-title, .ms-card .pending-line {
  color: var(--cut); -webkit-text-fill-color: var(--cut); background: none;
  text-shadow: 0 -1px 0 var(--cut-lo), 0 1px 0 var(--cut-hi); }
.ms-badge { font-weight: 700; font-size: 10.5px; }
.ms-card h1.ms-plan { font-weight: 600; font-size: 19px; letter-spacing: .16em; }
/* the vault turns to metal too: no dark panel, only a fine engraved frame */
.ms-vault { display: block; background: none; border: 1px solid rgba(58,42,18,.38);
  box-shadow: inset 0 1px 0 rgba(255,246,222,.35), 0 1px 0 rgba(255,246,222,.3); margin-top: 12px; }
.ms-offer { border: 0; padding: 22px 16px 6px; background: none; }
.ms-card .plan-rate .amount { font-weight: 700; font-size: 56px; letter-spacing: .02em;
  text-shadow: 0 -1px 0 rgba(40,27,8,.6), 0 1px 0 rgba(255,244,214,.6), 0 2px 1px rgba(255,244,214,.18); }
.ms-privileges { padding: 10px 20px 20px; }
/* the key: a plate sunk into the gold, its words cut the same way */
.ms-card #continue-payment.btn.solid.large { color: var(--cut); font-weight: 700;
  background: linear-gradient(180deg, rgba(60,42,14,.16), rgba(255,240,200,.10));
  border: 1px solid rgba(58,42,18,.45);
  box-shadow: inset 0 1px 2px rgba(40,27,8,.35), 0 1px 0 rgba(255,246,222,.4);
  text-shadow: 0 -1px 0 var(--cut-lo), 0 1px 0 var(--cut-hi); }
.ms-card #continue-payment.btn.solid.large:hover { filter: none; background: linear-gradient(180deg, rgba(60,42,14,.22), rgba(255,240,200,.14)); }
.ms-card #continue-payment::after { display: none; }
.ms-card .pending { background: rgba(60,42,14,.08); border-color: rgba(58,42,18,.35); }
@media (max-width: 600px) {
  .plan.ms-card { max-width: 100%; }
  .ms-card h1.ms-plan { font-size: 14px; }
  .ms-card .plan-rate .amount { font-size: 46px; }
}
[lang="ar"] .ms-card h1.ms-plan { font-size: 28px; }
@media (max-width: 600px) { [lang="ar"] .ms-card h1.ms-plan { font-size: 24px; } }
/* owner 2026-10-05: the payment key's frame clearly cut - a dark groove with a lit edge outside it */
.ms-card #continue-payment.btn.solid.large { border: 1.5px solid rgba(52,36,12,.85);
  box-shadow: inset 0 0 0 1px rgba(255,240,200,.28), inset 0 1px 2px rgba(40,27,8,.4), 0 1px 0 rgba(255,246,222,.55), 0 -1px 0 rgba(40,27,8,.25); }

/* owner 2026-10-05: the card in real metal, close to the crest's gold - warmer and deeper than
   the old champagne, a sharp specular band, fine brushed grain at device pixels, and a
   bevelled edge (lit top-left, shaded bottom-right) the way the crest's rim is cut. */
.ms-page { --cut: #3B2606; --cut-hi: rgba(255,236,170,.62); --cut-lo: rgba(48,28,2,.62); }
.plan.ms-card {
  border: 1px solid #F6DC93;
  background:
    linear-gradient(118deg, transparent 30%, rgba(255,250,222,.55) 39%, rgba(255,246,206,.0) 47%, transparent 100%),
    linear-gradient(118deg, transparent 58%, rgba(255,240,190,.28) 63%, transparent 69%),
    radial-gradient(120% 90% at 20% 0%, rgba(255,236,170,.35), transparent 55%),
    radial-gradient(90% 80% at 100% 100%, rgba(58,34,4,.55), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,240,200,.07) 0 1px, rgba(70,44,8,.07) 1px 2px, transparent 2px 3px),
    linear-gradient(160deg, #7A5414 0%, #B88A2E 14%, #E2B75A 30%, #F7DC8C 42%, #D9A947 56%, #A97A24 72%, #E0B350 86%, #7E5615 100%);
  box-shadow:
    0 30px 70px rgba(0,0,0,.65), 0 0 40px rgba(226,183,90,.10),
    inset 1px 1px 0 rgba(255,246,206,.85), inset -1px -1px 0 rgba(70,42,6,.75),
    inset 0 0 0 4px rgba(160,112,32,.35), inset 3px 3px 6px rgba(255,236,170,.25), inset -4px -4px 10px rgba(60,34,2,.35);
}
.plan.ms-card::before { border: 1px solid rgba(70,42,6,.45); box-shadow: 0 1px 0 rgba(255,240,190,.35), inset 0 1px 0 rgba(255,240,190,.25); }
.ms-vault { border-color: rgba(70,42,6,.45); box-shadow: inset 0 1px 0 rgba(255,240,190,.4), 0 1px 0 rgba(255,240,190,.35); }
.ms-badge, .ms-card h1.ms-plan, .ms-card .plan-rate .amount, .ms-card .pending-title, .ms-card .pending-line { color: var(--cut); -webkit-text-fill-color: var(--cut); }
.ms-card .plan-rate .amount { text-shadow: 0 -1px 0 rgba(48,28,2,.7), 0 1px 0 rgba(255,236,170,.7), 0 2px 1px rgba(255,236,170,.2); }
.ms-card #continue-payment.btn.solid.large { color: var(--cut); border-color: rgba(60,34,2,.85);
  background: linear-gradient(180deg, rgba(90,56,8,.20), rgba(255,236,170,.14)); }
@media (max-width: 600px) { [lang="ru"] .ms-card #continue-payment.btn.solid.large, [lang="de"] .ms-card #continue-payment.btn.solid.large { padding: 0 12px; letter-spacing: .06em; } }

/* owner 2026-10-05: the card a little smaller and its gold a little calmer */
.plan.ms-card { max-width: 480px; filter: saturate(.8) brightness(.96); }
@media (max-width: 600px) { .plan.ms-card { max-width: 100%; } }

/* owner 2026-10-05: proportions of a bank card (85.60 x 53.98 mm = 1.586 : 1) - width and
   height shrink together. The content is set compact to sit inside that shape; if a language
   ever needs more room the card grows taller rather than cutting a word. */
.plan.ms-card { max-width: 480px; aspect-ratio: 1.586 / 1; display: flex; flex-direction: column;
  padding: 16px 18px 16px; border-radius: 18px; }
.ms-card-head { gap: 6px; padding: 2px 8px 0; }
.ms-crest { width: 40px; }
.ms-badge { font-size: 10px; letter-spacing: .34em; }
.ms-card h1.ms-plan { font-size: 16px; letter-spacing: .14em; margin-top: 2px; white-space: nowrap; }
.ms-vault { flex: 1; display: flex; flex-direction: column; justify-content: center; margin-top: 10px; }
.ms-offer { padding: 8px 12px 4px; }
.ms-card .plan-rate .amount { font-size: 46px; }
.ms-privileges { padding: 8px 16px 12px; }
@media (max-width: 600px) {
  .plan.ms-card { max-width: 100%; padding: 12px 12px 12px; border-radius: 14px; }
  .ms-crest { width: 30px; }
  .ms-badge { font-size: 10px; letter-spacing: .22em; }
  .ms-card h1.ms-plan { font-size: 12.5px; letter-spacing: .08em; }
  .ms-vault { margin-top: 8px; }
  .ms-offer { padding: 4px 10px 2px; }
  .ms-card .plan-rate .amount { font-size: 36px; }
  .ms-privileges { padding: 6px 10px 10px; }
}
[lang="ar"] .ms-card h1.ms-plan { font-size: 24px; letter-spacing: 0; }
@media (max-width: 600px) { [lang="ar"] .ms-card h1.ms-plan { font-size: 20px; } [lang="de"] .ms-card h1.ms-plan, [lang="ru"] .ms-card h1.ms-plan { white-space: normal; } }
/* the vault never shrinks below its content, so a longer language (or the pending note) makes the card taller */
.ms-vault { flex: 1 0 auto; overflow: visible; min-height: min-content; }
.plan.ms-card { min-height: min-content; }

/* owner 2026-10-05: HOME / ALREADY A MEMBER sit just under the card as two quiet champagne
   links; the terms below them in a larger, clearer hand */
.ms-nav { margin: 22px auto 0; gap: 28px; }
.ms-nav a { font-size: 10px; letter-spacing: .32em; color: var(--aged); border-bottom: 1px solid rgba(196,162,102,.25); padding: 0 0 4px; }
.ms-nav a:hover { color: var(--aged-hi); border-bottom-color: var(--aged); }
.ms-nav span { color: rgba(196,162,102,.5); }
.ms-terms { margin-top: 30px; }
.ms-terms h2 { font-size: 11.5px; color: var(--aged); }
.ms-terms p { font-size: 13.5px; color: var(--ink-2); }
[lang="ar"] .ms-terms p { font-size: 21px; }

/* the bank-card shape as a floor, not a cage: the card is at least width / 1.586 tall and grows
   with its content (a longer language, the payment-pending note) instead of letting it spill.
   Container units measure the column the card sits in. */
.ms-main { container-type: inline-size; }
.plan.ms-card { aspect-ratio: auto; height: auto; min-height: calc(min(480px, 100cqw) / 1.586); }

/* owner 2026-10-05: CONTINUE reads as a key, in the crest's own gold - a polished bar
   (#FCDE92 -> #EFC378 -> #E4B165 -> #A16418, read from ame_crest.png) with the crest's dark
   rim (#6A3300), a lit edge outside it and a shadow under it; pressed, it sinks a pixel.
   The card's calming filter (saturate .8, brightness .96) is cancelled on the key alone, so
   its gold is the crest's exactly. */
.ms-card #continue-payment.btn.solid.large {
  filter: saturate(1.25) brightness(1.0417);
  color: #3A1E02; -webkit-text-fill-color: #3A1E02; font-weight: 700;
  border: 1px solid #6A3300;
  background: linear-gradient(180deg, #FCDE92 0%, #EFC378 30%, #E4B165 55%, #C08A3E 80%, #A16418 100%);
  box-shadow: inset 0 1px 0 rgba(255,246,214,.85), inset 0 -1px 0 rgba(106,51,0,.45),
              0 0 0 1px rgba(252,222,146,.55), 0 3px 8px rgba(40,20,0,.45), 0 1px 2px rgba(40,20,0,.5);
  text-shadow: 0 1px 0 rgba(255,236,180,.55);
  transition: filter .3s var(--ease), box-shadow .3s var(--ease), transform .15s var(--ease); }
.ms-card #continue-payment.btn.solid.large:hover {
  filter: saturate(1.25) brightness(1.1);
  background: linear-gradient(180deg, #FCDE92 0%, #EFC378 30%, #E4B165 55%, #C08A3E 80%, #A16418 100%);
  box-shadow: inset 0 1px 0 rgba(255,246,214,.9), inset 0 -1px 0 rgba(106,51,0,.45),
              0 0 0 1px rgba(252,222,146,.7), 0 4px 12px rgba(40,20,0,.5), 0 0 16px rgba(239,195,120,.35); }
.ms-card #continue-payment.btn.solid.large:active { transform: translateY(1px);
  box-shadow: inset 0 1px 2px rgba(106,51,0,.45), 0 0 0 1px rgba(252,222,146,.5), 0 1px 3px rgba(40,20,0,.45); }

/* owner 2026-10-05: the card exactly like the owner's reference picture - a brushed gold plate,
   a band across the top with the crest and two engraved lines, and a dark bronze panel in relief
   (bull, bear, laurel) holding our own crest, the price between two rules and the key.
   The plate is assets/img/ms_card_art.webp (1140 x 676), cut by tools/make_membership_card.py from
   tools/design_refs/owner_reference_card_2026-10-05.webp with the picture's own words, crest, price
   and key taken out. The real ones are laid on top, placed in percent of the card where the
   picture had them and sized in cqw (the card's own width), so they scale with it. The earlier
   metal finish, inner frame and filter are switched off. On a phone the card is taller than the
   picture: the gold stretches, and the panel shows its own crop (ms_card_panel.webp) uncut. */
.ms-page .plan.ms-card { container-type: inline-size; position: relative; display: block;
  width: 100%; max-width: 800px; aspect-ratio: 1140 / 676; height: auto; min-height: 0;
  margin: 18px auto 0; padding: 0; text-align: start; border: 0; border-radius: 1.95% / 3.3%; overflow: hidden;
  background: url("../img/ms_card_art.webp") center / 100% 100% no-repeat; filter: none;
  box-shadow: 0 30px 70px rgba(0,0,0,.72), 0 0 60px rgba(214,186,128,.07); }
.ms-page .plan.ms-card::before { display: none; }

/* the band: crest at the start, the two lines cut into the gold */
.ms-page .ms-card .ms-card-head { position: absolute; left: 0; right: 0; top: 0; height: 26.33%;
  display: block; padding: 0; gap: 0; text-align: start; }
.ms-page .ms-card .ms-crest { position: absolute; inset-inline-start: 7.8%; top: 9.6%; height: 84%; width: auto;
  filter: drop-shadow(0 .25cqw .35cqw rgba(40,24,4,.55)); }
.ms-page .ms-card .ms-card-titles { position: absolute; inset-inline-start: 23.4%; inset-inline-end: 3.5%; top: 4.6cqw; }
.ms-page .ms-card .ms-badge, .ms-page .ms-card h1.ms-plan {
  font-family: "Perpetua Titling MT", "Trajan Pro", "Palatino Linotype", Georgia, serif; line-height: 1; white-space: nowrap;
  color: #2A1C08; -webkit-text-fill-color: #2A1C08; background: none;
  text-shadow: 0 1px 0 rgba(255,242,205,.55), 0 -1px 0 rgba(48,30,6,.28); }
.ms-page .ms-card .ms-badge { margin: 0; font-size: clamp(14px, 4.2cqw, 40px); font-weight: 700; letter-spacing: .05em; }
.ms-page .ms-card h1.ms-plan { margin: .95cqw 0 0; font-size: clamp(10px, 2.05cqw, 20px); font-weight: 700; letter-spacing: .3em; }

/* the panel: our crest in the middle, the price between two rules, the key under it */
.ms-page .ms-card .ms-vault { position: absolute; left: 2.63%; right: 2.72%; top: 26.33%; bottom: 5.92%;
  display: block; margin: 0; padding: 0; min-height: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.ms-page .ms-card .ms-seal { position: absolute; left: 50%; top: 2.6%; height: 65.5%; width: auto; transform: translateX(-50%);
  filter: drop-shadow(0 .5cqw .9cqw rgba(0,0,0,.6)); }
/* owner 2026-10-05: the crest between the bull and the bear is cast in their bronze, as a relief
   like theirs (ms_seal_relief.webp, made by tools/make_seal_relief.py); its shadow is the short,
   soft one of a raised relief, not a floating object's */
.ms-page .ms-card .ms-seal { filter: drop-shadow(.12cqw .3cqw .35cqw rgba(0,0,0,.55)); }
/* owner 2026-10-05: the card a little smaller (was 800px wide; everything on it scales with it) */
.ms-page .plan.ms-card { max-width: 700px; }
.ms-page .ms-card .ms-offer { position: absolute; left: 0; right: 0; top: 75.1%; transform: translateY(-50%); padding: 0; border: 0; background: none; }
.ms-page .ms-card .plan-rate { margin: 0; display: flex; align-items: center; justify-content: center; gap: 3.1cqw; }
.ms-page .ms-card .plan-rate::before, .ms-page .ms-card .plan-rate::after { content: ""; width: 7.9cqw; height: 1px;
  background: linear-gradient(90deg, rgba(214,186,128,.15), rgba(226,200,140,.75), rgba(214,186,128,.15)); }
.ms-page .ms-card .plan-rate .amount { font-family: "Perpetua", "Palatino Linotype", Georgia, serif; font-weight: 400;
  font-size: clamp(18px, 4.3cqw, 42px); line-height: 1; letter-spacing: .02em;
  color: #DCC48E; -webkit-text-fill-color: #DCC48E; background: none;
  text-shadow: 0 1px 0 rgba(0,0,0,.65), 0 0 .9cqw rgba(214,186,128,.22); }
.ms-page .ms-card .ms-privileges { position: absolute; left: 25.4%; width: 48.9%; top: 82.75%; height: 13.1%; padding: 0; }
.ms-page .ms-card #continue-payment.btn.solid.large { position: relative; display: flex; width: 100%; height: 100%; min-height: 0; max-width: none;
  margin: 0; padding: 0 3.6cqw; border-radius: 999px; overflow: visible; white-space: nowrap;
  font-family: "Perpetua Titling MT", "Trajan Pro", "Palatino Linotype", Georgia, serif; font-weight: 700;
  font-size: clamp(10px, 1.7cqw, 17px); letter-spacing: .1em; line-height: 1;
  color: #E8D5A4; -webkit-text-fill-color: #E8D5A4; text-shadow: 0 1px 0 rgba(0,0,0,.6); filter: none;
  border: max(1px, .17cqw) solid #C6A15C;
  background: linear-gradient(180deg, #2C2213 0%, #1C150B 55%, #251C0F 100%);
  box-shadow: inset 0 1px 0 rgba(255,232,176,.16), inset 0 0 0 1px rgba(20,12,2,.7), 0 0 0 1px rgba(40,26,6,.85), 0 .35cqw .9cqw rgba(0,0,0,.5); }
.ms-page .ms-card #continue-payment.btn.solid.large::before,
.ms-page .ms-card #continue-payment.btn.solid.large::after { display: block; position: absolute; top: 50%; bottom: auto; width: auto;
  font-family: "Palatino Linotype", Georgia, serif; font-weight: 400; font-size: clamp(12px, 2.1cqw, 21px); line-height: 1;
  color: #D8BE85; -webkit-text-fill-color: #D8BE85; background: none; transform: translateY(-55%); animation: none; pointer-events: none;
  direction: ltr; unicode-bidi: isolate; }   /* the two guillemets keep pointing inward in Arabic too */
.ms-page .ms-card #continue-payment.btn.solid.large::before { content: "\2039"; left: 7.2%; right: auto; }
.ms-page .ms-card #continue-payment.btn.solid.large::after { content: "\203A"; right: 7.2%; left: auto; }
.ms-page .ms-card #continue-payment.btn.solid.large:hover { filter: none; color: #F6E7C2; -webkit-text-fill-color: #F6E7C2; border-color: #E1C07C;
  background: linear-gradient(180deg, #33281A 0%, #20180D 55%, #2A2011 100%);
  box-shadow: inset 0 1px 0 rgba(255,232,176,.22), inset 0 0 0 1px rgba(20,12,2,.7), 0 0 0 1px rgba(40,26,6,.85), 0 0 1.4cqw rgba(214,186,128,.25); }
.ms-page .ms-card #continue-payment.btn.solid.large:active { transform: translateY(1px); }

/* the pending note now sits under the card */
.ms-page .ms-main > .pending { max-width: 560px; margin: 16px auto 0; text-align: center; }

/* languages on the card */
[lang="de"] .ms-page .ms-card .ms-badge { font-size: clamp(12px, 3.35cqw, 32px); }
[lang="de"] .ms-page .ms-card #continue-payment.btn.solid.large,
[lang="ru"] .ms-page .ms-card #continue-payment.btn.solid.large { font-size: clamp(10px, 1.5cqw, 15px); letter-spacing: .06em; }
[lang="ar"] .ms-page .ms-card .ms-badge, [lang="ar"] .ms-page .ms-card h1.ms-plan,
[lang="ar"] .ms-page .ms-card #continue-payment.btn.solid.large { font-family: "Sakkal Majalla", "Traditional Arabic", serif; letter-spacing: 0; }
[lang="ar"] .ms-page .ms-card .ms-badge { font-size: clamp(20px, 5.6cqw, 52px); }
[lang="ar"] .ms-page .ms-card h1.ms-plan { font-size: clamp(16px, 3.3cqw, 32px); margin-top: .5cqw; }
[lang="ar"] .ms-page .ms-card .ms-card-titles { top: 3.2cqw; }
[lang="ar"] .ms-page .ms-card #continue-payment.btn.solid.large { font-size: clamp(16px, 2.7cqw, 26px); }

/* phone: the card taller than the picture, everything a step larger */
@media (max-width: 600px) {
  .ms-page .plan.ms-card { max-width: 420px; aspect-ratio: 347 / 400; margin-top: 12px; }
  .ms-page .ms-card .ms-vault { background: url("../img/ms_card_panel.webp") center / cover no-repeat; }
  .ms-page .ms-card .ms-crest { inset-inline-start: 5%; top: 15%; height: 70%; }
  .ms-page .ms-card .ms-card-titles { inset-inline-start: 23%; inset-inline-end: 3%; top: 0; bottom: 0;
    display: flex; flex-direction: column; justify-content: center; }
  .ms-page .ms-card .ms-badge, .ms-page .ms-card h1.ms-plan { white-space: normal; text-wrap: balance; }
  .ms-page .ms-card .ms-badge { font-size: clamp(13px, 4.1cqw, 18px); line-height: 1.15; }
  .ms-page .ms-card h1.ms-plan { font-size: 10px; letter-spacing: .14em; line-height: 1.3; margin-top: 6px; }
  .ms-page .ms-card .ms-seal { top: 5%; height: 46%; }
  .ms-page .ms-card .ms-offer { top: 64%; }
  .ms-page .ms-card .plan-rate .amount { font-size: clamp(20px, 7cqw, 30px); }
  .ms-page .ms-card .plan-rate::before, .ms-page .ms-card .plan-rate::after { width: 12cqw; }
  .ms-page .ms-card .ms-privileges { left: 7%; width: 86%; top: 77%; height: 15%; }
  .ms-page .ms-card #continue-payment.btn.solid.large { font-size: clamp(10px, 3.1cqw, 13px); letter-spacing: .06em; padding: 0 9cqw; }
  .ms-page .ms-card #continue-payment.btn.solid.large::before,
  .ms-page .ms-card #continue-payment.btn.solid.large::after { font-size: 16px; }
  [lang="de"] .ms-page .ms-card .ms-badge { font-size: clamp(12px, 3.6cqw, 16px); }
  [lang="de"] .ms-page .ms-card h1.ms-plan, [lang="ru"] .ms-page .ms-card h1.ms-plan { letter-spacing: .03em; }
  [lang="de"] .ms-page .ms-card #continue-payment.btn.solid.large,
  [lang="ru"] .ms-page .ms-card #continue-payment.btn.solid.large { font-size: 10px; letter-spacing: .03em; padding: 0 8cqw; }
  [lang="ar"] .ms-page .ms-card .ms-badge { font-size: 22px; }
  [lang="ar"] .ms-page .ms-card h1.ms-plan { font-size: 16px; letter-spacing: 0; }
  [lang="ar"] .ms-page .ms-card #continue-payment.btn.solid.large { font-size: 18px; }
}

/* owner 2026-10-05: the space behind the card is the owner's reference picture
   (owner_reference_card_mirror_2026-10-05.webp): its own gold milky way at the left and at the
   upper right, with the card and floor taken out and the middle filled with its own star field.
   Rebuilt at 3840 x 2160 for a sharp screen: the nebula's light is enlarged smoothly, every star
   is drawn again as a small sharp point (smaller than in the picture). assets/img/ms_nebula.webp,
   made by tools/make_nebula.py; see-through where the sky is black, so the page's own stars still
   show. A first, drawn milky way and a mirror reflection under the card were tried and withdrawn
   by the owner. */
.ms-light { background:
    url("../img/ms_nebula.webp") center / cover no-repeat,
    radial-gradient(42% 46% at 50% 50%, rgba(196,162,102,.08), transparent 72%),
    radial-gradient(120% 90% at 50% 50%, transparent 52%, rgba(0,0,0,.8) 100%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.008) 0 2px, transparent 2px 5px); }
@media (max-width: 600px) {
  .ms-page .plan.ms-card { max-width: 380px; }
  .ms-light { background-size: cover, auto, auto, auto; background-position: 8% 30%, center, center, 0 0; }   /* the left milky way on a phone */
}

/* owner 2026-10-05: the membership terms live in the footer bar, as one horizontal line under
   PRIVACY / © / LOCAL PREVIEW - a quiet note: the title in small gold capitals, the two sentences
   after it on the same line, parted by a dot (on a narrow screen the line wraps, centred) */
.ms-page .foot .ms-terms.wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: 2px 12px; max-width: var(--page); margin: 0 auto; padding-top: 0; padding-bottom: 22px; text-align: center; }
.ms-page .foot .ms-terms h2 { margin: 0; font-size: 10px; letter-spacing: .36em; color: var(--aged); }
.ms-page .foot .ms-terms p { margin: 0; font-size: 11.5px; line-height: 1.6; color: var(--ink-3); }
.ms-page .foot .ms-terms p::before { content: "\00B7"; margin-inline-end: 12px; color: var(--aged-lo); }
.ms-page .foot .wrap:first-child { padding-bottom: 14px; }
[lang="ar"] .ms-page .foot .ms-terms h2 { font-size: 16px; letter-spacing: 0; }
[lang="ar"] .ms-page .foot .ms-terms p { font-size: 17px; line-height: 1.5; }

/* owner 2026-10-05: the card page opens like any other page of the site - no hold, no separate
   entrance. (A whole-page hold until the images were ready was tried and withdrawn by the owner as
   annoying and out of step with the other pages.) The card's images are preloaded in
   membership.html so the card arrives with the page. */

/* owner 2026-10-05: the card a little smaller (was 700px wide; everything on it scales with it),
   and the page's sky the same as every other page - the nebula behind the card, with its glow
   and vignette, is withdrawn (ms_nebula.webp stays in assets/img, unused) */
.ms-page .plan.ms-card { max-width: 620px; }
@media (max-width: 600px) { .ms-page .plan.ms-card { max-width: 380px; } }
.ms-light { display: none; }

/* owner 2026-10-05: the line ONE PRIVATE MEMBERSHIP is gone from the gold band - the plan line
   stands alone, centred in the band and a step larger; with the key gone from the card, the price
   sits at the middle of the panel's lower part. */
.ms-page .ms-card .ms-card-titles { top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; }
.ms-page .ms-card h1.ms-plan { margin: 0; font-size: clamp(11px, 2.5cqw, 22px); letter-spacing: .22em; }
.ms-page .ms-card .ms-offer { top: 83%; }
[lang="de"] .ms-page .ms-card h1.ms-plan, [lang="ru"] .ms-page .ms-card h1.ms-plan { font-size: clamp(10px, 2.2cqw, 19px); letter-spacing: .12em; }
[lang="ar"] .ms-page .ms-card .ms-card-titles { top: 0; }
[lang="ar"] .ms-page .ms-card h1.ms-plan { margin: 0; font-size: clamp(18px, 3.9cqw, 34px); }
@media (max-width: 600px) {
  .ms-page .ms-card h1.ms-plan { font-size: 11.5px; letter-spacing: .14em; margin: 0; }
  .ms-page .ms-card .ms-offer { top: 74%; }
  [lang="de"] .ms-page .ms-card h1.ms-plan, [lang="ru"] .ms-page .ms-card h1.ms-plan { font-size: 11px; letter-spacing: .04em; }
  [lang="ar"] .ms-page .ms-card h1.ms-plan { font-size: 19px; }
}

/* owner 2026-10-05: CONTINUE TO SECURE PAYMENT under the card - a slim, soft key: a fine gold
   hairline, a breath of gold inside, champagne words; it brightens a little on hover. Same key,
   same behaviour (it only shows PAYMENT SETUP PENDING). */
.ms-page .ms-main > .ms-key-below { position: static; display: flex; justify-content: center; width: auto; height: auto;
  margin: 26px auto 0; padding: 0; }
.ms-page .ms-key-below #continue-payment.btn.solid.large {
  display: inline-flex; align-items: center; justify-content: center; width: auto; max-width: 100%; min-height: 0; height: 34px;
  margin: 0; padding: 0 32px; border-radius: 999px; overflow: visible; white-space: nowrap;
  font-family: var(--sans); font-weight: 500; font-size: 10.5px; line-height: 1; letter-spacing: .3em;
  color: #E6D3A3; -webkit-text-fill-color: #E6D3A3; text-shadow: none; filter: none;
  border: 1px solid rgba(214,186,128,.42); background: rgba(214,186,128,.035); box-shadow: none;
  transition: border-color .5s var(--ease), background .5s var(--ease), color .5s var(--ease); }
.ms-page .ms-key-below #continue-payment.btn.solid.large:hover {
  color: #F6E7C2; -webkit-text-fill-color: #F6E7C2; border-color: rgba(230,211,163,.78);
  background: rgba(214,186,128,.08); box-shadow: 0 0 18px rgba(214,186,128,.10); filter: none; }
.ms-page .ms-key-below #continue-payment.btn.solid.large::before,
.ms-page .ms-key-below #continue-payment.btn.solid.large::after { display: none; }
[lang="ar"] .ms-page .ms-key-below #continue-payment.btn.solid.large { font-family: "Sakkal Majalla", "Traditional Arabic", serif;
  font-size: 17px; font-weight: 700; letter-spacing: 0; }
[lang="de"] .ms-page .ms-key-below #continue-payment.btn.solid.large,
[lang="ru"] .ms-page .ms-key-below #continue-payment.btn.solid.large { letter-spacing: .16em; }
@media (max-width: 600px) {
  .ms-page .ms-key-below #continue-payment.btn.solid.large { height: 36px; padding: 0 22px; letter-spacing: .18em; }
  [lang="de"] .ms-page .ms-key-below #continue-payment.btn.solid.large,
  [lang="ru"] .ms-page .ms-key-below #continue-payment.btn.solid.large { letter-spacing: .06em; padding: 0 16px; }
}
/* owner 2026-10-05: the key further below the card, as wide as its words and slimmer */
.ms-page .ms-main > .ms-key-below { margin-top: 52px; }
.ms-page .ms-key-below #continue-payment.btn.solid.large { height: 32px; padding: 0 28px; }
@media (max-width: 600px) {
  .ms-page .ms-main > .ms-key-below { margin-top: 40px; }
  .ms-page .ms-key-below #continue-payment.btn.solid.large { height: 34px; padding: 0 20px; }
}