/* AME FX CAPITAL - Subscriber Portal. Private members club, dark only.
   Local files only: no web font, no external address, no framework. */

:root {
  /* colour */
  --obsidian: #040405;
  --obsidian-2: #08080A;
  --panel: rgba(14, 13, 11, .72);
  --hairline: rgba(214, 186, 128, .16);
  --hairline-strong: rgba(214, 186, 128, .34);
  --champagne: #D6BA80;
  --champagne-hi: #F1DFB4;
  --champagne-lo: #8E7444;
  --ink: #EDE8DD;
  --ink-2: #B7B0A2;
  --ink-3: #7D776C;
  --emerald: #3FCB8E;
  --emerald-glow: rgba(63, 203, 142, .28);
  --crimson: #D2455C;
  --crimson-soft: rgba(210, 69, 92, .14);

  /* type */
  --display: "Cinzel", "Trajan Pro", "Cormorant Garamond", "Palatino Linotype", Georgia, serif;
  --sans: "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --wide: .32em;
  --wider: .5em;

  /* space */
  --s1: 6px; --s2: 12px; --s3: 20px; --s4: 32px; --s5: 56px; --s6: 96px; --s7: 140px;
  --radius: 14px;
  --page: 1180px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--obsidian); color: var(--ink); }
body {
  font-family: var(--sans); font-size: 16px; line-height: 1.65; min-height: 100vh;
  display: flex; flex-direction: column; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 1px solid var(--champagne); outline-offset: 4px; }

/* ── the sky: deep black, fine stars, a few slow gold glints ── */
/* html and body both carry a background, so a negative z-index would sit under body's and never
   show: the sky paints at 0 and every page's header, main and footer stand above it at 1 */
.top, main, .foot { position: relative; z-index: 1; }
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1100px 620px at 50% -12%, rgba(214,186,128,.10), transparent 62%),
    radial-gradient(900px 500px at 50% 115%, rgba(214,186,128,.05), transparent 60%),
    var(--obsidian); }
.sky::before, .sky::after { content: ""; position: absolute; inset: 0; background-repeat: repeat; }
.sky::before { opacity: .55; background-size: 260px 260px;
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 140px 80px, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1px 1px at 220px 190px, rgba(241,223,180,.50), transparent 60%),
    radial-gradient(1px 1px at 70px 220px, rgba(255,255,255,.30), transparent 60%),
    radial-gradient(1.4px 1.4px at 190px 20px, rgba(241,223,180,.55), transparent 60%); }
.sky::after { opacity: .5; background-size: 610px 610px; animation: glint 9s ease-in-out infinite alternate;
  background-image:
    radial-gradient(1.6px 1.6px at 120px 400px, rgba(241,223,180,.9), transparent 60%),
    radial-gradient(1.2px 1.2px at 480px 140px, rgba(241,223,180,.8), transparent 60%),
    radial-gradient(1.2px 1.2px at 330px 520px, rgba(255,255,255,.7), transparent 60%); }
@keyframes glint { from { opacity: .18; } to { opacity: .6; } }



/* ── header ── */
.top { width: 100%; max-width: var(--page); margin: 0 auto; padding: var(--s3) var(--s4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.brand { display: flex; align-items: center; gap: var(--s2); }
.brand img { width: 30px; height: auto; filter: drop-shadow(0 0 10px rgba(214,186,128,.25)); }
.brand .name { font-family: var(--display); font-size: 15px; letter-spacing: var(--wide); color: var(--champagne-hi); white-space: nowrap; }
.brand .name small { display: block; font-family: var(--sans); font-size: 10px; letter-spacing: var(--wider); color: var(--ink-3); }
.top-right { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; justify-content: flex-end; }
.member { text-align: right; }
.member .who { font-size: 14px; letter-spacing: .08em; }

/* ── the keys ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 28px;
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: var(--wide); text-transform: uppercase;
  color: var(--champagne-hi); background: transparent; border: 1px solid var(--hairline-strong); border-radius: 999px;
  cursor: pointer; transition: border-color .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease); }
.btn:hover { border-color: var(--champagne); box-shadow: 0 0 24px rgba(214,186,128,.14); }
.btn.solid { color: #17130B; border-color: transparent;
  background: linear-gradient(180deg, var(--champagne-hi), var(--champagne) 55%, var(--champagne-lo)); }
.btn.solid:hover { box-shadow: 0 0 32px rgba(214,186,128,.30); }
.btn.small { min-height: 38px; padding: 0 18px; font-size: 11px; }
.btn.emerald { color: #04140C; border-color: transparent; background: linear-gradient(180deg, #6FE3B1, var(--emerald)); }
.btn.emerald:hover { box-shadow: 0 0 30px var(--emerald-glow); }
.btn[disabled], .btn[aria-disabled="true"] { cursor: not-allowed; color: var(--ink-3); background: rgba(255,255,255,.02);
  border-color: var(--hairline); box-shadow: none; }

.link { font-size: 12px; letter-spacing: var(--wide); text-transform: uppercase; color: var(--ink-2); }
.link:hover { color: var(--champagne-hi); }

/* ── type ── */
.eyebrow { font-size: 11px; letter-spacing: var(--wider); text-transform: uppercase; color: var(--champagne); margin: 0 0 var(--s2); }
.display { font-family: var(--display); font-weight: 400; letter-spacing: .14em; color: var(--champagne-hi); margin: 0;
  font-size: clamp(34px, 7vw, 84px); line-height: 1.05;
  background: linear-gradient(180deg, var(--champagne-hi) 0%, var(--champagne) 60%, var(--champagne-lo) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.subtitle { font-size: clamp(12px, 1.6vw, 15px); letter-spacing: var(--wider); text-transform: uppercase; color: var(--ink); margin: var(--s3) 0 var(--s2); }
.motto { font-family: var(--display); font-size: clamp(15px, 2vw, 19px); letter-spacing: .2em; color: var(--champagne); margin: 0; }
h2.section { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 3vw, 32px); letter-spacing: .16em; color: var(--champagne-hi); margin: 0 0 var(--s3); }
.lede { font-size: 17px; color: var(--ink-2); max-width: 640px; }
.fine { font-size: 13px; color: var(--ink-3); letter-spacing: .04em; }

/* ── layout ── */
main { flex: 1; width: 100%; }
.wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 var(--s4); }
.hero { position: relative; overflow: hidden; text-align: center; padding: var(--s6) var(--s4) var(--s7); }
.hero .crest { width: 120px; margin: 0 auto var(--s4); filter: drop-shadow(0 0 28px rgba(214,186,128,.22)); }
.hero .actions { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; margin-top: var(--s5); }
.hero .fine { margin-top: var(--s4); }
.rule { width: 64px; height: 1px; margin: var(--s4) auto; background: linear-gradient(90deg, transparent, var(--champagne), transparent); }

.section-block { padding: var(--s6) 0; border-top: 1px solid var(--hairline); }
.about { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--s5); align-items: start; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.card { position: relative; background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: var(--s4); backdrop-filter: blur(6px); transition: border-color .5s var(--ease); }
.card:hover { border-color: var(--hairline-strong); }
.card::before { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214,186,128,.55), transparent); }
.card h3 { font-size: 12px; font-weight: 600; letter-spacing: var(--wider); color: var(--champagne); margin: 0 0 var(--s2); }
.card p { margin: 0; color: var(--ink-2); font-size: 15px; }
.card .num { font-family: var(--display); font-size: 13px; color: var(--ink-3); letter-spacing: .3em; margin-bottom: var(--s3); display: block; }

/* ── access pages ── */
.centre { min-height: calc(100vh - 200px); display: grid; place-items: center; padding: var(--s5) var(--s3); }
.access { width: 100%; max-width: 440px; text-align: center; }
.access .crest { width: 72px; margin: 0 auto var(--s3); }
.access h1 { font-family: var(--display); font-weight: 400; font-size: 26px; letter-spacing: .22em; color: var(--champagne-hi); margin: 0 0 var(--s4); }
.field { display: grid; gap: 8px; text-align: left; margin-bottom: var(--s3); }
.field label { font-size: 11px; letter-spacing: var(--wide); text-transform: uppercase; color: var(--ink-3); }
.field input { width: 100%; min-height: 50px; padding: 0 16px; font-size: 16px; color: var(--ink); background: rgba(0,0,0,.5);
  border: 1px solid var(--hairline-strong); border-radius: 10px; transition: border-color .3s var(--ease); }
.field input:focus { outline: none; border-color: var(--champagne); box-shadow: 0 0 0 3px rgba(214,186,128,.08); }
.access .btn { width: 100%; margin-top: var(--s2); }
.status-line { min-height: 22px; margin: var(--s3) 0 0; font-size: 12px; letter-spacing: var(--wide); color: var(--crimson); }
.status-line.note { color: var(--champagne); }
.access .below { display: flex; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s4); }

/* membership: one plan */
.plan { width: 100%; max-width: 560px; text-align: center; padding: var(--s5) var(--s4); background: var(--panel);
  border: 1px solid var(--hairline-strong); border-radius: 22px; position: relative;
  box-shadow: 0 0 80px rgba(214,186,128,.06); }
.plan::before { content: ""; position: absolute; left: 48px; right: 48px; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--champagne-hi), transparent); }
.plan .crest { width: 64px; margin: 0 auto var(--s3); }
.plan h1 { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 3.4vw, 30px); letter-spacing: .22em;
  color: var(--champagne-hi); margin: 0; }
.plan-rate { margin: var(--s3) 0 0; display: flex; align-items: baseline; justify-content: center; gap: 12px; flex-wrap: wrap; }
.plan-rate .amount { font-family: var(--display); font-size: clamp(46px, 8vw, 72px); line-height: 1; letter-spacing: .04em;
  background: linear-gradient(180deg, var(--champagne-hi), var(--champagne) 60%, var(--champagne-lo));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.plan-rate .per { font-size: 13px; letter-spacing: var(--wider); color: var(--ink-2); }
.includes { list-style: none; margin: 0 auto var(--s4); padding: 0; max-width: 380px; text-align: left; }
.includes li { position: relative; padding: 10px 0 10px 28px; border-bottom: 1px solid var(--hairline); color: var(--ink); font-size: 15px; }
.includes li:last-child { border-bottom: 0; }
.includes li::before { content: ""; position: absolute; left: 4px; top: 50%; width: 8px; height: 8px; transform: translateY(-50%) rotate(45deg);
  border: 1px solid var(--champagne); background: rgba(214,186,128,.12); }
.btn.large { width: 100%; min-height: 58px; font-size: 13px; }
.pending { margin-top: var(--s3); padding: var(--s3); border: 1px solid var(--hairline-strong); border-radius: 12px;
  background: rgba(214,186,128,.05); }
.pending-title { margin: 0; font-size: 12px; letter-spacing: var(--wider); color: var(--champagne-hi); }
.pending-line { margin: 8px 0 0; color: var(--ink-2); font-size: 14px; }
.terms-notes { list-style: none; margin: var(--s4) 0 var(--s3); padding: 0; text-align: left; }
.terms-notes li { font-size: 13px; color: var(--ink-3); padding: 4px 0 4px 16px; position: relative; }
.terms-notes li::before { content: "·"; position: absolute; left: 4px; color: var(--champagne); }
.plan .below { display: flex; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }

/* gate pages */
.gate h1 { color: var(--crimson); }
.gate .lede { margin: 0 auto var(--s4); }
.seal { width: 64px; height: 64px; margin: 0 auto var(--s3); border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(210,69,92,.45); background: var(--crimson-soft); color: var(--crimson); font-size: 22px; }

/* ── dashboard ── */
.dash { padding-top: var(--s4); padding-bottom: var(--s6); }   /* keeps .wrap's side padding: aligned with the header */
.dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s3); margin-top: var(--s3); }
.stat .label { font-size: 11px; letter-spacing: var(--wider); color: var(--ink-3); text-transform: uppercase; }
.stat .value { font-family: var(--display); font-size: clamp(20px, 2.4vw, 28px); letter-spacing: .1em; margin-top: var(--s2); color: var(--ink); }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: 11px;
  letter-spacing: var(--wide); text-transform: uppercase; border: 1px solid var(--hairline-strong); color: var(--champagne-hi); }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.ok { color: var(--emerald); border-color: rgba(63,203,142,.4); background: rgba(63,203,142,.06); }
.pill.ok::before { box-shadow: 0 0 10px var(--emerald-glow); animation: breathe 3.6s ease-in-out infinite; }
.pill.bad { color: var(--crimson); border-color: rgba(210,69,92,.45); background: var(--crimson-soft); }
.pill.wait { color: var(--ink-3); border-color: var(--hairline); }
@keyframes breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

.app-card { display: grid; grid-template-columns: 96px 1fr; gap: var(--s4); align-items: center; }
.app-card img { width: 96px; }
.app-card h3 { font-family: var(--display); font-weight: 400; font-size: 18px; letter-spacing: .16em; color: var(--champagne-hi); margin: 0 0 var(--s2); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) var(--s3); margin: 0 0 var(--s3); }
.facts dt { font-size: 10px; letter-spacing: var(--wider); color: var(--ink-3); }
.facts dd { margin: 4px 0 0; font-size: 14px; }
.dl-note { margin-top: var(--s2); font-size: 11px; letter-spacing: var(--wide); color: var(--ink-3); min-height: 18px; }
.dl-note.on { color: var(--emerald); }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 var(--s3) 26px; color: var(--ink-2); font-size: 14px; }
.timeline li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-3); }
.timeline li::after { content: ""; position: absolute; left: 7px; top: 18px; bottom: 2px; width: 1px; background: var(--hairline); }
.timeline li:last-child::after { display: none; }
.timeline li.done { color: var(--ink); }
.timeline li.done::before { background: var(--emerald); box-shadow: 0 0 10px var(--emerald-glow); }
.timeline time { display: block; font-size: 11px; letter-spacing: .14em; color: var(--ink-3); }

.notes { margin: 0; padding-left: 18px; color: var(--ink-2); }

/* ── footer ── */
.foot { border-top: 1px solid var(--hairline); margin-top: auto; }
.foot .wrap { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; padding-top: var(--s4); padding-bottom: var(--s4); }
.foot nav { display: flex; gap: var(--s4); flex-wrap: wrap; }
.foot .fine { margin: 0; }
.local-flag { font-size: 10px; letter-spacing: var(--wider); color: var(--champagne-lo); }

/* hidden until the page script decides */
[hidden] { display: none !important; }
.fade-in { animation: rise .9s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── tablet ── */
@media (max-width: 980px) {
  .about { grid-template-columns: 1fr; gap: var(--s4); }
  .cards { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: 1fr; }
}
/* ── phone ── */
@media (max-width: 600px) {
  :root { --s4: 20px; --s5: 36px; --s6: 60px; --s7: 84px; }
  .top { flex-direction: column; align-items: stretch; padding: var(--s3) 20px; }
  .top-right { justify-content: space-between; }
  .member { text-align: left; }
  .wrap { padding: 0 20px; }
  .hero { padding: var(--s5) 20px var(--s6); }
  .hero .actions .btn { width: 100%; }

  .grid-3 { grid-template-columns: 1fr; }
  .app-card { grid-template-columns: 1fr; text-align: left; }
  .app-card img { width: 64px; }
  .facts { grid-template-columns: 1fr; }
  .dash-head { flex-direction: column; align-items: flex-start; }
  .btn { width: 100%; }
  .btn.small { width: auto; }
  .foot nav { gap: var(--s3); }
}
/* ── motion: only for those who want it ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── languages: EN | DE | AR ── */
.lang-switch { display: inline-flex; align-items: center; gap: 6px; margin-inline-end: 6px; }
.lang-switch button { background: none; border: 0; border-bottom: 1px solid transparent; padding: 5px 3px; cursor: pointer;
  font: 600 11px/1 var(--sans); letter-spacing: .16em; color: var(--ink-3); transition: color .4s var(--ease), border-color .4s var(--ease); }
.lang-switch button:hover { color: var(--champagne-hi); }
.lang-switch button.on { color: var(--champagne-hi); border-bottom-color: var(--champagne); }
.lang-switch .lang-sep { font-size: 11px; color: var(--hairline-strong); }
.btn { text-align: center; }

/* German: long words wrap inside their box instead of being cut */
[lang="de"] h1, [lang="de"] h2, [lang="de"] h3, [lang="de"] .subtitle, [lang="de"] .eyebrow, [lang="de"] .btn,
[lang="de"] .card p, [lang="de"] .lede, [lang="de"] dt, [lang="de"] dd { overflow-wrap: anywhere; hyphens: auto; }

/* Arabic: right to left, an Arabic-capable face, and no letter-spacing on Arabic words
   (spacing breaks the joined letters). The brand words keep their Latin face and spacing;
   the crest, the logo, the icons and the figure are never mirrored. */
[lang="ar"] { --sans: "Segoe UI", Tahoma, Arial, sans-serif; --display: "Segoe UI", Tahoma, Arial, sans-serif; }
[lang="ar"] body { font-family: var(--sans); }
[dir="rtl"] body, [dir="rtl"] body * { letter-spacing: 0 !important; }
[lang="ar"] .display, [lang="ar"] .brand .name, [lang="ar"] .ms-house, [lang="ar"] .amount {
  font-family: "Cinzel", "Trajan Pro", "Palatino Linotype", Georgia, serif; }
[dir="rtl"] .display { letter-spacing: .14em !important; }
[dir="rtl"] .brand .name, [dir="rtl"] .ms-house { letter-spacing: .2em !important; }
[lang="ar"] .brand .name small { font-family: var(--sans); }
[lang="ar"] .eyebrow, [lang="ar"] .subtitle, [lang="ar"] .card h3, [lang="ar"] .stat .label, [lang="ar"] .facts dt,
[lang="ar"] .field label, [lang="ar"] .link, [lang="ar"] .btn, [lang="ar"] .pill { font-size: 13px; }
[lang="ar"] .subtitle { font-size: 16px; }
[lang="ar"] .motto { font-size: 19px; }
[dir="rtl"] .field { text-align: right; }
[dir="rtl"] .member { text-align: left; }
[dir="rtl"] .notes { padding-left: 0; padding-right: 18px; }
[dir="rtl"] .timeline li { padding: 0 26px var(--s3) 0; }
[dir="rtl"] .timeline li::before { left: auto; right: 4px; }
[dir="rtl"] .timeline li::after { left: auto; right: 7px; }
[dir="rtl"] .amount, [dir="rtl"] .brand img, [dir="rtl"] .crest, [dir="rtl"] svg { direction: ltr; }
/* DOWNLOAD FOR WINDOWS: a slim champagne key aligned with the content, not a full-width bar.
   Same element, same states (disabled until a release is PUBLISHED) - only its look. */
.btn#download { width: auto; min-width: 232px; max-width: 100%; height: 42px; min-height: 42px; padding: 0 20px;
  border-radius: 3px; font-size: 11px; letter-spacing: .2em; white-space: nowrap; }
.btn#download:not([disabled]), .btn#download.emerald { color: #1C150A; border: 1px solid rgba(255,236,190,.6);
  background: linear-gradient(180deg, #EADBB4 0%, #D4B77F 55%, #BE9C62 100%);
  box-shadow: inset 0 1px 0 rgba(255,250,235,.55), 0 0 14px rgba(214,186,128,.12); transition: filter .4s var(--ease); }
.btn#download:not([disabled]):hover { filter: brightness(1.05); box-shadow: inset 0 1px 0 rgba(255,250,235,.55), 0 0 14px rgba(214,186,128,.12); }
.btn#download[disabled] { color: var(--ink-3); background: rgba(214,186,128,.035); border: 1px solid rgba(214,186,128,.22); box-shadow: none; }
@media (max-width: 600px) {
  .btn#download { width: auto; min-width: 232px; height: 44px; min-height: 44px; }
}
/* keys on the home and membership pages: smaller, slimmer, softer (owner 2026-10-05) */
.top .btn.small { min-height: 32px; padding: 0 16px; font-size: 10.5px; letter-spacing: .26em; border-color: rgba(214,186,128,.26); }
[data-page="landing"] .hero .btn { min-height: 40px; padding: 0 24px; font-size: 11px; letter-spacing: .26em; font-weight: 600; }
[data-page="landing"] .hero .btn.solid { color: #1E170B;
  background: linear-gradient(180deg, #E8D8B0 0%, #D2B57F 60%, #BA9C64 100%);
  box-shadow: inset 0 1px 0 rgba(255,250,235,.45); }
[data-page="landing"] .hero .btn.solid:hover { filter: brightness(1.04); box-shadow: inset 0 1px 0 rgba(255,250,235,.45); }
[data-page="landing"] .hero .btn:not(.solid) { border-color: rgba(214,186,128,.28); }
@media (max-width: 600px) {
  [data-page="landing"] .hero .actions { align-items: center; flex-direction: column; }
  [data-page="landing"] .hero .actions .btn { width: 100%; max-width: 260px; }
}
/* DOWNLOAD FOR WINDOWS: slimmer still (owner 2026-10-05) */
.btn#download { height: 36px; min-height: 36px; min-width: 0; padding: 0 24px; font-size: 10.5px; letter-spacing: .2em; }
@media (max-width: 600px) { .btn#download { height: 40px; min-height: 40px; min-width: 0; padding: 0 22px; letter-spacing: .16em; } }
/* every key in the portal: slim and quiet (owner 2026-10-05) - thin border, small type, no bulk */
.btn { min-height: 36px; padding: 0 22px; font-size: 10.5px; font-weight: 500; letter-spacing: .24em; border-width: 1px; }
.btn.solid { color: #1E170B; background: linear-gradient(180deg, #E6D6AE 0%, #D0B37E 60%, #BA9D66 100%);
  box-shadow: inset 0 1px 0 rgba(255,250,235,.4); }
.btn.solid:hover { filter: brightness(1.04); box-shadow: inset 0 1px 0 rgba(255,250,235,.4); }
.btn:not(.solid):not(#download) { border-color: rgba(214,186,128,.28); }
.btn.small, .top .btn.small { min-height: 30px; padding: 0 14px; font-size: 10px; letter-spacing: .22em; }
[data-page="landing"] .hero .btn { min-height: 36px; padding: 0 24px; font-size: 10.5px; font-weight: 500; }
.btn#download { height: 34px; min-height: 34px; padding: 0 22px; font-size: 10px; font-weight: 500; letter-spacing: .2em; }
.access .btn { min-height: 38px; }
@media (max-width: 600px) {
  .btn { min-height: 38px; }
  .btn.small, .top .btn.small { min-height: 30px; }
  .btn#download { height: 38px; min-height: 38px; }
}
/* Russian: long words wrap inside their box, like German */
[lang="ru"] h1, [lang="ru"] h2, [lang="ru"] h3, [lang="ru"] .subtitle, [lang="ru"] .eyebrow, [lang="ru"] .btn,
[lang="ru"] .card p, [lang="ru"] .lede, [lang="ru"] dt, [lang="ru"] dd { overflow-wrap: anywhere; hyphens: auto; }
/* ANALYTICAL FOUNDATION: a quiet, centred note; 235 as a fine gold figure between hairlines */
.foundation-inner { max-width: 760px; text-align: center; }
.foundation .section { margin-bottom: var(--s3); }
.foundation-figure { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0 auto; }
.foundation-figure .rule-l, .foundation-figure .rule-r { width: 64px; height: 1px; }
.foundation-figure .rule-l { background: linear-gradient(90deg, transparent, var(--champagne)); }
.foundation-figure .rule-r { background: linear-gradient(90deg, var(--champagne), transparent); }
.foundation-figure .figure { font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif; font-size: 40px; line-height: 1;
  letter-spacing: .06em; direction: ltr; unicode-bidi: isolate;
  background: linear-gradient(180deg, var(--champagne-hi), var(--champagne) 60%, var(--champagne-lo));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.foundation-cap { margin: 10px 0 var(--s4); font-size: 10.5px; letter-spacing: var(--wider); color: var(--champagne); }
.foundation .lede { margin: 0 auto var(--s3); font-size: 16px; }
.foundation .fine { margin-top: var(--s3); }
[dir="rtl"] .foundation-figure .rule-l { background: linear-gradient(270deg, transparent, var(--champagne)); }
[dir="rtl"] .foundation-figure .rule-r { background: linear-gradient(270deg, var(--champagne), transparent); }
@media (max-width: 600px) { .foundation-figure .figure { font-size: 34px; } .foundation-figure .rule-l, .foundation-figure .rule-r { width: 40px; } }
/* every key in every page: slim - only a little taller than its words (owner 2026-10-05) */
.btn, [data-page="landing"] .hero .btn, .access .btn { min-height: 30px; height: 30px; padding: 0 18px; line-height: 1;
  font-size: 10.5px; font-weight: 500; letter-spacing: .22em; }
.btn.small, .top .btn.small { min-height: 26px; height: 26px; padding: 0 12px; font-size: 10px; letter-spacing: .18em; }
.btn#download { min-height: 30px; height: 30px; padding: 0 18px; font-size: 10px; }
@media (max-width: 600px) {
  .btn, [data-page="landing"] .hero .btn, .access .btn, .btn#download { min-height: 34px; height: 34px; }
  .btn.small, .top .btn.small { min-height: 28px; height: 28px; }
}

/* Arabic: an elegant classical naskh (Sakkal Majalla, installed with Windows - nothing fetched),
   bold cut for headings and keys, sizes rebalanced because it draws smaller than Latin type.
   Brand words and figures keep their Latin serif. */
[lang="ar"] { --sans: "Sakkal Majalla", "Traditional Arabic", "Segoe UI", serif;
              --display: "Sakkal Majalla", "Traditional Arabic", "Segoe UI", serif; }
[lang="ar"] body { font-family: var(--sans); font-size: 19px; line-height: 1.6; }
[lang="ar"] button, [lang="ar"] input { font-family: var(--sans); }
[lang="ar"] .lang-switch button { font-family: "Segoe UI", system-ui, sans-serif; }
[lang="ar"] .brand .name small { font-family: var(--sans); font-size: 14px; }
[lang="ar"] h1:not(.display), [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] .btn, [lang="ar"] .eyebrow,
[lang="ar"] .subtitle, [lang="ar"] .pill, [lang="ar"] .foundation-cap { font-weight: 700; }
[lang="ar"] .eyebrow, [lang="ar"] .card h3, [lang="ar"] .stat .label, [lang="ar"] .facts dt, [lang="ar"] .field label,
[lang="ar"] .link, [lang="ar"] .pill, [lang="ar"] .foundation-cap, [lang="ar"] .local-flag, [lang="ar"] .dl-note,
[lang="ar"] .status-line, [lang="ar"] .message { font-size: 17px; }
[lang="ar"] .btn, [lang="ar"] [data-page="landing"] .hero .btn, [lang="ar"] .btn#download { font-size: 16px; }
[lang="ar"] .btn.small, [lang="ar"] .top .btn.small { font-size: 15px; }
[lang="ar"] .subtitle { font-size: 22px; }
[lang="ar"] .motto { font-size: 26px; }
[lang="ar"] h2.section { font-size: 38px; }
[lang="ar"] .lede { font-size: 21px; }
[lang="ar"] .card p, [lang="ar"] .timeline li, [lang="ar"] .facts dd, [lang="ar"] .notes li { font-size: 19px; }
[lang="ar"] .fine, [lang="ar"] .small { font-size: 17px; }
[lang="ar"] .access h1 { font-size: 34px; }
[lang="ar"] .stat .value { font-size: 30px; }/* Arabic, one step larger: the naskh needs more size to read with the same presence */
[lang="ar"] .subtitle { font-size: 27px; }
[lang="ar"] .motto { font-size: 31px; }
[lang="ar"] .fine, [lang="ar"] .small { font-size: 20px; }
[lang="ar"] .lede { font-size: 24px; }
[lang="ar"] .card p, [lang="ar"] .timeline li, [lang="ar"] .facts dd, [lang="ar"] .notes li { font-size: 21px; }
[lang="ar"] .eyebrow, [lang="ar"] .card h3, [lang="ar"] .stat .label, [lang="ar"] .facts dt, [lang="ar"] .field label,
[lang="ar"] .link, [lang="ar"] .pill, [lang="ar"] .foundation-cap, [lang="ar"] .local-flag, [lang="ar"] .dl-note,
[lang="ar"] .status-line, [lang="ar"] .message { font-size: 19px; }
[lang="ar"] .btn, [lang="ar"] [data-page="landing"] .hero .btn, [lang="ar"] .access .btn, [lang="ar"] .btn#download {
  font-size: 18px; height: 36px; min-height: 36px; }
[lang="ar"] .btn.small, [lang="ar"] .top .btn.small { font-size: 16px; height: 30px; min-height: 30px; }
[lang="ar"] .brand .name small { font-size: 16px; }
[lang="ar"] h2.section { font-size: 42px; }
/* the company name and the three words: finer and softer (owner 2026-10-05).
   Perpetua Titling MT Light for the name, Perpetua Italic for the words - both installed
   with Windows/Office on this PC; a hosted site will need a licensed web font. */
.display, [lang] .display { font-family: "Perpetua Titling MT", "Palatino Linotype", Georgia, serif !important; font-weight: 300;
  font-size: clamp(30px, 5.4vw, 70px); letter-spacing: .2em !important;
  background: linear-gradient(180deg, #F3E6C4 0%, #D8BE86 55%, #A98B55 100%); -webkit-background-clip: text; background-clip: text; }
.brand .name, [lang] .brand .name { font-family: "Perpetua Titling MT", "Palatino Linotype", Georgia, serif !important; font-weight: 300; font-size: 16px; }
.lockup-words { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: var(--s3); }
.lockup-words .w { font-family: "Perpetua", "Garamond", "Palatino Linotype", Georgia, serif; font-style: italic; font-size: 25px;
  letter-spacing: .06em; color: var(--champagne-hi); opacity: 0; animation: lockup 9s ease-in-out infinite; }
.lockup-words .dia { font-size: 10px; display: inline-block; scale: .7; color: var(--champagne); opacity: 0; animation: lockup 9s ease-in-out infinite; }
.lockup-words .w1 { animation-delay: 0s; }
.lockup-words .d1 { animation-delay: .7s; }
.lockup-words .w2 { animation-delay: 1.2s; }
.lockup-words .d2 { animation-delay: 1.9s; }
.lockup-words .w3 { animation-delay: 2.4s; }
@keyframes lockup { 0% { opacity: 0; transform: translateY(5px); filter: blur(2px); } 9% { opacity: 1; transform: none; filter: none; }
                    70% { opacity: 1; } 82% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lockup-words .w, .lockup-words .dia { animation: none; opacity: 1; } }
[lang="ar"] .lockup-words .w { font-family: var(--sans); font-style: normal; font-size: 30px; font-weight: 700; letter-spacing: 0; }
@media (max-width: 600px) { .lockup-words { gap: 10px; } .lockup-words .w { font-size: 20px; } [lang="ar"] .lockup-words .w { font-size: 25px; } }

/* status pills and keys on the account page: slim, just around the word */
.pill { padding: 3px 12px; font-size: 10px; letter-spacing: .22em; }
.stat .value .pill { font-family: var(--sans); }
[lang="ar"] .pill { font-size: 16px; padding: 2px 12px; }
/* the three words, slower: one by one over ~5 s, all three hold 3 s, fade out together, begin again */
.lockup-words .w, .lockup-words .dia { animation-duration: 10.5s; animation-delay: 0s !important; animation-timing-function: ease-in-out; }
.lockup-words .w1 { animation-name: lk-w1; }
.lockup-words .d1 { animation-name: lk-d1; }
.lockup-words .w2 { animation-name: lk-w2; }
.lockup-words .d2 { animation-name: lk-d2; }
.lockup-words .w3 { animation-name: lk-w3; }
@keyframes lk-w1 { 0% { opacity: 0; transform: translateY(5px); filter: blur(2px); } 11.4% { opacity: 1; transform: none; filter: none; } 78% { opacity: 1; } 89.5%, 100% { opacity: 0; } }
@keyframes lk-d1 { 0%, 11.4% { opacity: 0; } 19% { opacity: 1; } 78% { opacity: 1; } 89.5%, 100% { opacity: 0; } }
@keyframes lk-w2 { 0%, 19% { opacity: 0; transform: translateY(5px); filter: blur(2px); } 30.5% { opacity: 1; transform: none; filter: none; } 78% { opacity: 1; } 89.5%, 100% { opacity: 0; } }
@keyframes lk-d2 { 0%, 30.5% { opacity: 0; } 38% { opacity: 1; } 78% { opacity: 1; } 89.5%, 100% { opacity: 0; } }
@keyframes lk-w3 { 0%, 38% { opacity: 0; transform: translateY(5px); filter: blur(2px); } 49.5% { opacity: 1; transform: none; filter: none; } 78% { opacity: 1; } 89.5%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lockup-words .w, .lockup-words .dia { animation: none !important; opacity: 1; } }
/* lockup: no separators between the three words (owner request) - wider gap keeps the rhythm */
.lockup-words { gap: 38px; }
@media (max-width: 600px) { .lockup-words { gap: 18px; } }

/* hero keys: START MEMBERSHIP dark like MEMBER ACCESS; both carry the console's active
   indicator key (EngineKey .on): void face, warm gold foot, gold ring, gold lip at the base */
[data-page="landing"] .hero .actions .btn,
[data-page="landing"] .hero .actions .btn.solid {
  color: #FFF3D2; font-weight: 600; filter: none;
  background: linear-gradient(180deg, #030305 0%, #030305 45%, rgb(52,46,28) 100%);
  border: 1px solid rgba(228,190,110,.35);
  box-shadow: inset 0 -1px 0 rgba(228,190,110,.42);
}
[data-page="landing"] .hero .actions .btn:hover,
[data-page="landing"] .hero .actions .btn.solid:hover {
  filter: none; border-color: rgba(228,190,110,.55);
  box-shadow: inset 0 -1px 0 rgba(228,190,110,.6), 0 0 14px rgba(228,190,110,.10);
}

/* owner 2026-10-05: black stays black, but read as deep space with a little gold dust.
   Still pinned to the viewport (position: fixed, inset 0): nothing moves across the page,
   so nothing can push past a phone's edge. Two dust tiles of different sizes so the
   repeat does not show; the brightest specks breathe slowly (opacity only). */
.sky {
  background-color: #010102;
  background-image:
    radial-gradient(1px 1px at 37px 61px, rgba(232,200,130,.55), transparent 70%),
    radial-gradient(1px 1px at 181px 23px, rgba(232,200,130,.35), transparent 70%),
    radial-gradient(1.3px 1.3px at 262px 207px, rgba(240,214,160,.50), transparent 70%),
    radial-gradient(1px 1px at 96px 288px, rgba(232,200,130,.30), transparent 70%),
    radial-gradient(1px 1px at 312px 118px, rgba(255,245,225,.35), transparent 70%),
    radial-gradient(1px 1px at 58px 402px, rgba(232,200,130,.40), transparent 70%),
    radial-gradient(1.2px 1.2px at 401px 333px, rgba(240,214,160,.45), transparent 70%),
    radial-gradient(1px 1px at 222px 451px, rgba(232,200,130,.30), transparent 70%),
    radial-gradient(1200px 700px at 50% -15%, rgba(214,186,128,.07), transparent 62%),
    radial-gradient(700px 420px at 12% 78%, rgba(160,120,60,.035), transparent 70%),
    radial-gradient(800px 480px at 90% 40%, rgba(160,120,60,.03), transparent 70%);
  background-size: 340px 340px, 340px 340px, 340px 340px, 340px 340px,
                   470px 470px, 470px 470px, 470px 470px, 470px 470px, auto, auto, auto;
  background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat, no-repeat;
}
.sky::before { opacity: .7; }
.sky::after { opacity: .5; background-size: 610px 610px; animation: dust-breathe 7s ease-in-out infinite alternate;
  background-image:
    radial-gradient(2px 2px at 120px 400px, rgba(244,216,150,.95), transparent 70%),
    radial-gradient(1.6px 1.6px at 480px 140px, rgba(244,216,150,.85), transparent 70%),
    radial-gradient(1.4px 1.4px at 330px 520px, rgba(255,240,205,.75), transparent 70%),
    radial-gradient(1.8px 1.8px at 560px 470px, rgba(232,190,110,.8), transparent 70%),
    radial-gradient(1.2px 1.2px at 40px 90px, rgba(244,216,150,.7), transparent 70%); }
@keyframes dust-breathe { from { opacity: .25; } to { opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .sky::after { animation: none; opacity: .55; } }

/* owner 2026-10-05: company name a little shorter (was clamp(30px, 5.4vw, 70px)) */
.display, [lang] .display { font-size: clamp(27px, 4.6vw, 60px); }

/* owner 2026-10-05: stars twinkle and drift very slowly, like the original console's field.
   Three depths at three speeds - the far dust (on .sky) crosses its tile in ~9 minutes, the
   middle stars (::before) in ~6, the near bright ones (::after) in ~7 - drifting sideways and a
   touch upward. Only background-position and opacity move: the layer stays pinned to the
   viewport, so it can never widen the page. Each layer twinkles on its own beat. */
.sky { animation: sky-far 540s linear infinite; }
@keyframes sky-far {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 340px -85px, 340px -85px, 340px -85px, 340px -85px,
                              470px -117px, 470px -117px, 470px -117px, 470px -117px, 0 0, 0 0, 0 0; }
}
.sky::before { animation: sky-mid 360s linear infinite, twinkle-mid 4.6s ease-in-out infinite alternate; }
@keyframes sky-mid { from { background-position: 0 0; } to { background-position: 260px -65px; } }
@keyframes twinkle-mid { from { opacity: .45; } to { opacity: .85; } }
.sky::after { animation: sky-near 420s linear infinite, dust-breathe 7s ease-in-out infinite alternate; }
@keyframes sky-near { from { background-position: 0 0; } to { background-position: 610px -152px; } }
@media (prefers-reduced-motion: reduce) { .sky, .sky::before, .sky::after { animation: none; } }

/* owner 2026-10-05: sign-in crest the size of the home crest; SIGN IN key no longer the
   width of the form - it sits centred, only as long as its word needs */
.access .crest { width: 120px; margin: 0 auto var(--s4); filter: drop-shadow(0 0 28px rgba(214,186,128,.22)); }
.access .btn { display: flex; width: fit-content; min-width: 200px; margin-left: auto; margin-right: auto; padding: 0 40px; }
/* owner 2026-10-05 (same request): fields shorter and lower; SIGN IN only a little longer than its word */
.access { max-width: 340px; }
.field input { min-height: 40px; height: 40px; }
.access .btn { min-width: 0; padding: 0 26px; }

/* owner 2026-10-05: dust smaller, twinkling scattered and in turn, like distant stars.
   The large glints are gone; the points come from portal.js (.star), each on its own beat. */
.sky { overflow: hidden; }
.sky::after { background-image: none; animation: none; }
.sky::before { opacity: .38; animation: sky-mid 360s linear infinite; }
.sky .star { position: absolute; border-radius: 50%; background: rgb(240,214,160); opacity: .15;
  animation-name: star-twinkle; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.sky .star.flare { animation-name: star-flare; background: rgb(250,228,180); }
@keyframes star-twinkle { 0%, 100% { opacity: .08; } 50% { opacity: .75; } }
@keyframes star-flare { 0%, 78% { opacity: .1; box-shadow: none; }
  86% { opacity: 1; box-shadow: 0 0 3px 1px rgba(244,216,150,.45); } 94%, 100% { opacity: .1; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .sky .star { animation: none; opacity: .4; } }

/* owner 2026-10-05: MEMBER ACCESS title on one line in German and Russian, as in English and Arabic */
[data-page="signin"] .access h1 { white-space: nowrap; }
[lang="de"] [data-page="signin"] .access h1, [lang="ru"] [data-page="signin"] .access h1 { font-size: 21px; letter-spacing: .14em; margin-left: -50px; margin-right: -50px; }
@media (max-width: 600px) {
  [lang="de"] [data-page="signin"] .access h1, [lang="ru"] [data-page="signin"] .access h1 { font-size: 17px; letter-spacing: .1em; margin-left: 0; margin-right: 0; }
}

/* owner 2026-10-05: the twinkle stays; the still dust goes back to fine specks (it had grown) */
.sky {
  background-image:
    radial-gradient(.6px .6px at 37px 61px, rgba(232,200,130,.40), transparent 70%),
    radial-gradient(.5px .5px at 181px 23px, rgba(232,200,130,.28), transparent 70%),
    radial-gradient(.7px .7px at 262px 207px, rgba(240,214,160,.36), transparent 70%),
    radial-gradient(.5px .5px at 96px 288px, rgba(232,200,130,.24), transparent 70%),
    radial-gradient(.5px .5px at 312px 118px, rgba(255,245,225,.26), transparent 70%),
    radial-gradient(.6px .6px at 58px 402px, rgba(232,200,130,.30), transparent 70%),
    radial-gradient(.6px .6px at 401px 333px, rgba(240,214,160,.32), transparent 70%),
    radial-gradient(.5px .5px at 222px 451px, rgba(232,200,130,.24), transparent 70%),
    radial-gradient(1200px 700px at 50% -15%, rgba(214,186,128,.07), transparent 62%),
    radial-gradient(700px 420px at 12% 78%, rgba(160,120,60,.035), transparent 70%),
    radial-gradient(800px 480px at 90% 40%, rgba(160,120,60,.03), transparent 70%);
}
.sky::before { opacity: .22; }

/* owner 2026-10-05: section titles in a finer book face - Perpetua for Latin (as in the
   three-word lockup), Garamond picks up Cyrillic; close spacing and no word broken by a hyphen */
h2.section:not([lang="ar"] *) { font-family: "Perpetua", "Garamond", "Palatino Linotype", Georgia, serif;
  font-weight: 400; font-size: clamp(26px, 3.4vw, 38px); letter-spacing: .03em; line-height: 1.25;
  hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; word-break: normal; }

/* owner 2026-10-05: the legal disclosure closes the home page - the only place for the general-display wording */
.disclosure .wrap { max-width: 760px; text-align: center; }
.disclosure .eyebrow { margin: 0 0 var(--s2); font-size: 11px; font-weight: 500; }
.disclosure .fine { margin: 0 auto 8px; line-height: 1.75; }
[lang="ar"] .disclosure .eyebrow { font-size: 19px; }

/* owner 2026-10-05: no full-width rules between the parts of a page. A section opens under a
   short gold hairline that fades out at both ends; the footer sits under a long, very soft fade. */
.section-block { border-top: 0; position: relative; }
.section-block::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(220px, 50%); height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(214,186,128,.5) 50%, transparent); }
.foot { border-top: 0; }
.foot::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 6%, rgba(214,186,128,.16) 35%, rgba(214,186,128,.16) 65%, transparent 94%); }

/* owner 2026-10-05: cards are see-through - the sky shows behind them; the gold frame and its
   glint along the top edge stay as they were */
.card { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* owner 2026-10-05: the first screen is the hero alone - crest, name, words, keys. The next
   section starts below the fold and appears only as the visitor scrolls. 80px / 124px is the
   header above it (one row on a wide screen, two rows on a phone). */
[data-page="landing"] .hero { display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: calc(100vh - 80px); min-height: calc(100svh - 80px); }
@media (max-width: 600px) {
  [data-page="landing"] .hero { min-height: calc(100vh - 124px); min-height: calc(100svh - 124px); }
}

/* owner 2026-10-05: crest, name and keys sit higher on the first screen - the group is centred
   on the upper part of the screen (the space under it is larger than the space above it) */
[data-page="landing"] .hero { padding-top: 0; padding-bottom: 22vh; }
@media (max-width: 600px) { [data-page="landing"] .hero { padding-top: 0; padding-bottom: 20vh; } }
/* owner 2026-10-05 (again: higher): the group starts just under the header, and the gaps
   inside it are a little tighter, so the name and the two keys rise further than the crest */
[data-page="landing"] .hero { justify-content: flex-start; padding-top: clamp(8px, 2vh, 28px); padding-bottom: var(--s6); }
[data-page="landing"] .hero .crest { margin-bottom: 24px; }
[data-page="landing"] .hero .actions { margin-top: 36px; }
@media (max-width: 600px) { [data-page="landing"] .hero { padding-top: 8px; padding-bottom: var(--s5); } }

/* owner 2026-10-05: the two hero keys are always the same length and the same height, in every
   language - two equal grid columns as wide as the longer label; on a phone one column, both
   keys the full column width */
[data-page="landing"] .hero .actions { display: grid; grid-template-columns: repeat(2, 1fr); align-items: stretch; }
[data-page="landing"] .hero .actions .btn,
[data-page="landing"] .hero .actions .btn.solid { width: 100%; max-width: none; }   /* height stays as set above, the same rule for both */
@media (max-width: 600px) {
  [data-page="landing"] .hero .actions { grid-template-columns: minmax(0, 260px); justify-content: center; width: 100%; }
}
/* owner 2026-10-05: the two keys a little further below the name (36px -> 52px) */
[data-page="landing"] .hero .actions { margin-top: 52px; }

/* owner 2026-10-05: two lines in the hero, under the name and its three words, above the keys -
   the first a calm gold in the book face, the second smaller, a soft ivory. Balanced wrapping so
   a narrow screen never leaves one word alone on a line; no hyphen breaks a word. */
.hero .hero-line { margin: 30px auto 0; max-width: 820px; font-family: "Perpetua", "Garamond", "Palatino Linotype", Georgia, serif;
  font-weight: 400; font-size: clamp(20px, 1.9vw, 28px); line-height: 1.35; letter-spacing: .015em; color: #D2B783;
  text-wrap: balance; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; }
.hero .hero-sub { margin: 10px auto 0; max-width: 640px; font-family: var(--sans); font-weight: 300;
  font-size: clamp(14px, 1.15vw, 16.5px); line-height: 1.6; letter-spacing: .02em; color: rgba(232,226,212,.62);
  text-wrap: balance; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; }
[lang="ar"] .hero .hero-line { font-family: var(--display); font-size: clamp(28px, 2.5vw, 36px); font-weight: 400;
  letter-spacing: 0; line-height: 1.45; }
[lang="ar"] .hero .hero-sub { font-family: var(--sans); font-size: clamp(20px, 1.6vw, 23px); font-weight: 400; letter-spacing: 0; }
@media (max-width: 600px) { .hero .hero-line { margin-top: 24px; } }

/* owner 2026-10-05: the first hero line no longer looks like the name or the three words -
   a Didone face (Bodoni) instead of Perpetua, and the crest's own warm gold (#E0B975, read
   from ame_crest.png) instead of the pale champagne. Arabic: Arabic Typesetting, same gold. */
.hero .hero-line { font-family: "Bodoni MT", "Didot", "Bodoni 72", "Baskerville Old Face", "Book Antiqua", Georgia, serif;
  font-weight: 400; letter-spacing: .01em; color: #E0B975; }
[lang="ar"] .hero .hero-line { font-family: "Arabic Typesetting", "Sakkal Majalla", "Traditional Arabic", serif;
  font-size: clamp(32px, 2.9vw, 40px); line-height: 1.35; color: #E0B975; }
/* owner 2026-10-05: the first hero line in a calm, unlit white (no glow) - and a lighter book face
   (Californian FB) than Bodoni, whose heavy stems read too strong in white */
.hero .hero-line, [lang="ar"] .hero .hero-line { color: rgba(228,222,211,.9); text-shadow: none; }
.hero .hero-line { font-family: "Californian FB", "Book Antiqua", "Palatino Linotype", Georgia, serif; }

/* owner 2026-10-05: only the crest, the name and the three words rise a little (18px); the two
   lines and the keys stay exactly where they were (the line's top margin takes the 18px back) */
[data-page="landing"] .hero .crest { margin-top: -18px; }
[data-page="landing"] .hero .hero-line { margin-top: 48px; }
@media (max-width: 600px) { [data-page="landing"] .hero .hero-line { margin-top: 42px; } }

/* owner 2026-10-05: the second hero line in the first line's calm white, one step larger */
.hero .hero-sub, [lang="ar"] .hero .hero-sub { color: rgba(228,222,211,.9); }
.hero .hero-sub { font-size: clamp(15.5px, 1.3vw, 18.5px); }
[lang="ar"] .hero .hero-sub { font-size: clamp(22px, 1.75vw, 25px); }
/* owner 2026-10-05: the second hero line in the same face as the first (Californian FB; Arabic
   Typesetting in Arabic), still a step smaller. Arabic Typesetting draws small, so its size is
   raised to keep the line the same visual size as before. */
.hero .hero-sub { font-family: "Californian FB", "Book Antiqua", "Palatino Linotype", Georgia, serif; font-weight: 400; letter-spacing: .01em; }
[lang="ar"] .hero .hero-sub { font-family: "Arabic Typesetting", "Sakkal Majalla", "Traditional Arabic", serif;
  font-size: clamp(26px, 2vw, 29px); line-height: 1.4; }

/* owner 2026-10-05: the two hero keys' words in bold, in every language */
[data-page="landing"] .hero .actions .btn,
[data-page="landing"] .hero .actions .btn.solid,
[lang] [data-page="landing"] .hero .actions .btn,
[lang] [data-page="landing"] .hero .actions .btn.solid { font-weight: 700; }

/* owner 2026-10-05: the two hero keys in the crest's gold (the same colours as the membership
   card's payment key, read from ame_crest.png), the words cut into the metal: a dark fill with
   the cut's shadow above and the metal's lit lip below */
[data-page="landing"] .hero .actions .btn,
[data-page="landing"] .hero .actions .btn.solid,
[lang] [data-page="landing"] .hero .actions .btn,
[lang] [data-page="landing"] .hero .actions .btn.solid {
  color: #3F2304; -webkit-text-fill-color: #3F2304; font-weight: 700; filter: none;
  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,.3), 0 3px 10px rgba(0,0,0,.55);
  text-shadow: 0 1px 0 rgba(255,240,190,.6), 0 -1px 0 rgba(70,36,0,.35); }
[data-page="landing"] .hero .actions .btn:hover,
[data-page="landing"] .hero .actions .btn.solid:hover {
  filter: brightness(1.06);
  border-color: #6A3300;
  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,.45), 0 3px 12px rgba(0,0,0,.55), 0 0 16px rgba(239,195,120,.25); }
[data-page="landing"] .hero .actions .btn:active { transform: translateY(1px); }

/* owner 2026-10-05: the two keys a little lower (52px -> 68px under the second line; 64px on a
   phone); on a wide screen the crest and the name a little higher (14px), the two lines held
   where they were */
[data-page="landing"] .hero .actions { margin-top: 68px; }
@media (min-width: 601px) {
  [data-page="landing"] .hero .crest { margin-top: -32px; }
  [data-page="landing"] .hero .hero-line { margin-top: 62px; }
}
@media (max-width: 600px) { [data-page="landing"] .hero .actions { margin-top: 64px; } }

/* owner 2026-10-05: the crest and the name go back where they were (-32px clipped the crest's
   top against the hero's edge), and the lower part - the two lines with the keys under them -
   sits further down (+24px on a wide screen, +16px on a phone) */
@media (min-width: 601px) {
  [data-page="landing"] .hero .crest { margin-top: -18px; }
  [data-page="landing"] .hero .hero-line { margin-top: 72px; }
}
@media (max-width: 600px) { [data-page="landing"] .hero .hero-line { margin-top: 58px; } }

/* owner 2026-10-05: the two hero keys as metal, like the crest - a polished gold face with a
   glossy upper half, fine vertical brushing and light bouncing back near the base; a dark bronze
   rim with a bright gold line outside it (the crest's own cut edge); a slow shine travels across
   the face. The shine moves inside the key (background-position on ::before, inset 0), so
   nothing ever leaves the key's box. */
[data-page="landing"] .hero .actions .btn,
[data-page="landing"] .hero .actions .btn.solid,
[lang] [data-page="landing"] .hero .actions .btn,
[lang] [data-page="landing"] .hero .actions .btn.solid {
  position: relative; z-index: 0; overflow: hidden;
  border: 1.5px solid #5D300C;
  background:
    linear-gradient(180deg, rgba(255,255,248,.55) 0%, rgba(255,252,236,.18) 38%, rgba(255,255,255,0) 50%),
    repeating-linear-gradient(90deg, rgba(255,250,230,.07) 0 1px, rgba(70,40,0,.06) 1px 2px, transparent 2px 3px),
    linear-gradient(180deg, #FFF0B8 0%, #F6D488 16%, #E2AE57 40%, #B9802F 60%, #D9A64F 80%, #E9BC66 88%, #9A6219 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,240,.95), inset 0 -2px 3px rgba(90,48,0,.45), inset 0 0 0 1px rgba(255,236,170,.35),
    0 0 0 1px #E4B165, 0 0 0 2.5px #6A3300, 0 4px 12px rgba(0,0,0,.6);
  color: #3F2304; -webkit-text-fill-color: #3F2304;
  text-shadow: 0 1px 0 rgba(255,242,200,.7), 0 -1px 0 rgba(70,36,0,.35); }
[data-page="landing"] .hero .actions .btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, transparent 40%, rgba(255,255,245,.55) 50%, transparent 60%, transparent 100%);
  background-size: 260% 100%; background-repeat: no-repeat; background-position: 160% 0;
  animation: hero-key-shine 7s ease-in-out infinite; }
[data-page="landing"] .hero .actions .btn + .btn::before { animation-delay: 1.2s; }
@keyframes hero-key-shine { 0%, 62% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
[data-page="landing"] .hero .actions .btn:hover,
[data-page="landing"] .hero .actions .btn.solid:hover {
  filter: brightness(1.07);
  box-shadow:
    inset 0 1px 0 rgba(255,255,240,.95), inset 0 -2px 3px rgba(90,48,0,.45), inset 0 0 0 1px rgba(255,236,170,.45),
    0 0 0 1px #F0C878, 0 0 0 2.5px #6A3300, 0 4px 14px rgba(0,0,0,.6), 0 0 18px rgba(239,195,120,.3); }
@media (prefers-reduced-motion: reduce) { [data-page="landing"] .hero .actions .btn::before { animation: none; } }

/* owner 2026-10-05: one key in the hero (MEMBER ACCESS stays in the page header only) -
   START MEMBERSHIP alone, centred under the two lines */
[data-page="landing"] .hero .actions { grid-template-columns: max-content; justify-content: center; }
[data-page="landing"] .hero .actions .btn,
[data-page="landing"] .hero .actions .btn.solid { padding: 0 34px; }
@media (max-width: 600px) { [data-page="landing"] .hero .actions { grid-template-columns: minmax(0, 260px); } }

/* owner 2026-10-05: the short gold hairline that opens the next section shows near the foot of
   the first screen (about 36px above it); the section's words still start below the fold.
   The hero ends 36px earlier and keeps only 20px under its key. In Arabic the two lines are
   larger, so their gaps are a little tighter on a wide screen to leave room for the line. */
[data-page="landing"] .hero { padding-bottom: 20px; min-height: calc(100vh - 116px); min-height: calc(100svh - 116px); }
@media (max-width: 600px) {
  [data-page="landing"] .hero { padding-bottom: 20px; min-height: calc(100vh - 160px); min-height: calc(100svh - 160px); }
}
@media (min-width: 601px) {
  [lang="ar"] [data-page="landing"] .hero .hero-line { margin-top: 52px; }
  [lang="ar"] [data-page="landing"] .hero .actions { margin-top: 52px; }
}

/* owner 2026-10-05: the earth from the owner's reference at the foot of the home page's first
   screen (assets/img/earth_horizon.webp, cut by tools/make_earth_band.py); the space above it
   stays the portal's own sky. It scrolls with the page and lies under every word (main stands
   at 1). Its top melts into the sky, its foot into black. The band is as wide as the screen and
   never narrower than 1000px, so a phone shows the middle of the planet. Its rim (19% down the
   band) rests on the foot of the screen, but never rises closer than 44px under the hero key:
   on a short screen the planet slides lower instead of climbing into the key. */
.earth { position: absolute; left: 0; right: 0; z-index: 0; pointer-events: none;
  --earth-h: calc(max(100vw, 1000px) * .1501);
  height: var(--earth-h);
  top: max(calc(100svh - var(--earth-h)), calc(690px - .19 * var(--earth-h)));
  background: url("../img/earth_horizon.webp") center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 84%, transparent 100%); }
@supports (anchor-name: --a) {
  [data-page="landing"] .hero .actions { anchor-name: --hero-key; }
  .earth { position-anchor: --hero-key;
    top: max(calc(100svh - var(--earth-h)), calc(anchor(--hero-key bottom) + 44px - .19 * var(--earth-h))); }
}

/* owner 2026-10-05: a standard header on every page - the name at the page's start edge, the
   languages and MEMBER ACCESS at its end edge (it was a centred 1180px column) */
.top { max-width: none; padding-left: clamp(20px, 3.2vw, 56px); padding-right: clamp(20px, 3.2vw, 56px); }
/* owner 2026-10-05: the footer the same way on every page - PRIVACY / TERMS / SUPPORT at the start
   edge, LOCAL PREVIEW at the end edge, © between them (same side margins as the header) */
.foot > .wrap:first-child { max-width: none; padding-left: clamp(20px, 3.2vw, 56px); padding-right: clamp(20px, 3.2vw, 56px); }

/* owner 2026-10-05: one word, LANGUAGE, in the header; pressing it opens the four languages, each
   written in its own language, in a small dark panel under it (the header sits above the page so
   the panel lies over the content) */
.top, .ms-page .top { z-index: 30; }
.lang-menu { position: relative; display: inline-flex; margin-inline-end: 6px; }
.lang-toggle { display: inline-flex; align-items: center; gap: 9px; padding: 6px 2px; background: none; border: 0;
  border-bottom: 1px solid transparent; cursor: pointer; font: 600 11px/1 var(--sans); letter-spacing: .24em;
  color: var(--champagne-hi); transition: border-color .4s var(--ease), color .4s var(--ease); }
.lang-toggle::after { content: ""; width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .35s var(--ease); }
.lang-toggle:hover, .lang-menu.open .lang-toggle { border-bottom-color: var(--champagne); }
.lang-menu.open .lang-toggle::after { transform: translateY(1px) rotate(-135deg); }
.lang-menu .lang-switch { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 40; display: flex; flex-direction: column;
  gap: 0; min-width: 156px; margin: 0; padding: 8px 0; border: 1px solid var(--hairline-strong); border-radius: 4px;
  background: rgba(12, 10, 7, .97); box-shadow: 0 18px 44px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,236,190,.06); }
.lang-menu .lang-switch button { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%;
  padding: 9px 18px; border: 0; border-radius: 0; background: none; cursor: pointer; text-align: start;
  font: 500 13px/1.2 "Segoe UI", system-ui, sans-serif; letter-spacing: .06em; text-transform: none; color: var(--ink-2);
  transition: color .3s var(--ease), background .3s var(--ease); }
.lang-menu .lang-switch button:hover { color: var(--champagne-hi); background: rgba(214,186,128,.06); }
.lang-menu .lang-switch button.on { color: var(--champagne-hi); }
.lang-menu .lang-switch button.on::after { content: ""; width: 5px; height: 5px; flex: none; transform: rotate(45deg); background: var(--champagne); }
.lang-menu .lang-switch button[data-lang="ar"] { font-family: "Sakkal Majalla", "Traditional Arabic", "Segoe UI", serif; font-size: 17px; font-weight: 700; }
[lang="ar"] .lang-toggle { font-family: var(--sans); font-size: 16px; font-weight: 700; }
@media (max-width: 600px) { .lang-menu .lang-switch { inset-inline-end: auto; inset-inline-start: 0; } }

/* owner 2026-10-05: MEMBERS under the name was too small, too thin and too grey - now a step
   larger, semibold and in champagne gold, still quieter than the name above it */
.brand .name small { margin-top: 3px; font-size: 11px; font-weight: 600; letter-spacing: .42em; color: var(--champagne); }
[lang="ar"] .brand .name small { font-size: 17px; font-weight: 700; letter-spacing: 0; }

/* owner 2026-10-05: the two hero lines in the face of the three words under the name (Perpetua
   italic; in Arabic the three words' Sakkal Majalla, bold), sizes and colours unchanged - and always
   exactly two lines, in every language: each sentence stays on one line. When a language's sentence
   is wider than the screen, portal.js (fitHeroLines) sets that line a little smaller instead. */
.hero .hero-line, .hero .hero-sub { font-family: "Perpetua", "Garamond", "Palatino Linotype", Georgia, serif; font-style: italic;
  white-space: nowrap; text-wrap: nowrap; max-width: none; width: 100%; box-sizing: border-box; overflow: visible; }
[lang="ar"] .hero .hero-line, [lang="ar"] .hero .hero-sub { font-family: "Sakkal Majalla", "Traditional Arabic", serif;
  font-style: normal; font-weight: 700; }
[lang="ar"] .hero .hero-line { font-size: clamp(28px, 2.4vw, 34px); }
[lang="ar"] .hero .hero-sub { font-size: clamp(21px, 1.7vw, 25px); }

/* owner 2026-10-05: the crest floats on the sky as a clean cut-out - no gold halo behind it (the
   soft gold drop-shadow read as a faint gold box around the shield). The pictures themselves were
   made solid inside by tools/make_crest_solid.py, so nothing of the page shows through them. */
.hero .crest, .access .crest, .brand img { filter: none; }

/* owner 2026-10-05: the language panel as wide as the word LANGUAGE above it, starting under it
   (a short word - Arabic - lets the panel grow to its longest language name instead of cutting it) */
.lang-menu .lang-switch { inset-inline-start: 0; inset-inline-end: auto; width: max-content; min-width: 100%; }
.lang-menu .lang-switch button { padding: 9px 12px; gap: 10px; }