/* KINGS account pages: sign-in (with its "Create account" and "Forgot your
   password?" views) and the reset-password page. Same tokens, fonts and
   background as the public landing page (website/build/landing/landing.css),
   so walking from the landing page into these pages feels like one product.
   Mobile first (the base rules are the 375 px phone layout). Every language,
   Arabic included, keeps this one left-to-right layout, like the dashboard
   (the owner: the page must not flip): only the texts change, and an Arabic
   text is its own right-to-left run (js/page-i18n.js, js/auth-ui.js), so its
   punctuation and numbers still sit where an Arabic reader expects them. */
:root {
  --bg: #0A0E16; --panel: #111726; --panel2: #161D2E; --panel3: #1C2640;
  --border: rgba(255,255,255,.07); --border2: rgba(255,255,255,.13);
  --text: #EAEEF6; --dim: #98A2B6; --faint: #697089;
  --gold: #E9A93C; --gold-soft: #F6D488; --gold-deep: #B5822B; --goldtint: rgba(233,169,60,.14);
  --emerald: #3FBE7B; --danger: #FF7A7A;
  --r: 18px; --r2: 12px;
  --brand: 'Cinzel', 'IBM Plex Sans', Georgia, serif;
  --head: 'Outfit', 'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body: 'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
/* Outfit has no Cyrillic or Greek letters: Russian and Greek headings are set
   in IBM Plex Sans (as on the landing page), never in two faces at once */
html[lang="ru"], html[lang="el"] { --head: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); overflow-x: clip; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--text);
  font: 400 15.5px/1.6 var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
/* joined Arabic letters break apart when spaced: no letter-spacing in Arabic,
   except the Latin logo word KINGS, which is never translated */
html[lang="ar"] body, html[lang="ar"] body * { letter-spacing: 0 !important; }
html[lang="ar"] .brand-name { letter-spacing: .16em !important; }
html[lang="ar"] .brand-sub { letter-spacing: .26em !important; }
h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
[hidden] { display: none !important; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; border-radius: 8px; }
.ic { width: 1.15em; height: 1.15em; flex-shrink: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* background: the landing page's gold/blue glows and faint star field */
.fx { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 520px at 78% -6%, rgba(233,169,60,.16), transparent 62%),
    radial-gradient(800px 600px at -8% 8%, rgba(91,156,240,.09), transparent 60%),
    radial-gradient(700px 520px at 50% 108%, rgba(233,169,60,.07), transparent 70%),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='220'%3E%3Cg%20fill='%23cfd8ea'%3E%3Ccircle%20cx='18'%20cy='26'%20r='1'%20fill-opacity='.4'/%3E%3Ccircle%20cx='64'%20cy='12'%20r='.9'%20fill-opacity='.28'/%3E%3Ccircle%20cx='120'%20cy='40'%20r='1.1'%20fill-opacity='.4'/%3E%3Ccircle%20cx='205'%20cy='66'%20r='1'%20fill-opacity='.35'/%3E%3Ccircle%20cx='38'%20cy='84'%20r='.9'%20fill-opacity='.25'/%3E%3Ccircle%20cx='96'%20cy='102'%20r='1.2'%20fill-opacity='.4'/%3E%3Ccircle%20cx='150'%20cy='92'%20r='.8'%20fill-opacity='.28'/%3E%3Ccircle%20cx='12'%20cy='150'%20r='1'%20fill-opacity='.3'/%3E%3Ccircle%20cx='128'%20cy='150'%20r='1.1'%20fill-opacity='.38'/%3E%3Ccircle%20cx='186'%20cy='140'%20r='.9'%20fill-opacity='.28'/%3E%3Ccircle%20cx='105'%20cy='196'%20r='1'%20fill-opacity='.3'/%3E%3C/g%3E%3Cg%20fill='%23E9A93C'%3E%3Ccircle%20cx='88'%20cy='58'%20r='1.2'%20fill-opacity='.45'/%3E%3Ccircle%20cx='160'%20cy='176'%20r='1.1'%20fill-opacity='.4'/%3E%3C/g%3E%3C/svg%3E") repeat,
    var(--bg); }

/* ---- top bar: "Back to the site" (start side) and the language menu (end side) ---- */
.top { width: 100%; max-width: 1200px; margin: 0 auto; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.back { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; min-width: 0; padding: 0 16px 0 12px; border-radius: var(--r2); border: 1px solid var(--border2);
  background: rgba(255,255,255,.035); color: var(--text); text-decoration: none; font: 600 14px/1.2 var(--head); transition: background-color .15s, border-color .15s, transform .15s; }
.back:hover { background: rgba(255,255,255,.07); border-color: rgba(233,169,60,.4); transform: translateY(-1px); }
.back .ic { color: var(--gold); width: 18px; height: 18px; }
.back-crown { width: 30px; height: auto; filter: drop-shadow(0 3px 8px rgba(233,169,60,.35)); }

.lang { position: relative; flex-shrink: 0; }
.lang-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: var(--r2); border: 1px solid var(--border2); cursor: var(--gc-click, pointer);
  background: rgba(255,255,255,.035); color: var(--text); font: 600 13.5px/1 var(--head); letter-spacing: .04em; transition: border-color .15s, background-color .15s; }
.lang-btn:hover, .lang.open .lang-btn { border-color: rgba(233,169,60,.4); background: rgba(255,255,255,.06); }
.lang-btn .ic { color: var(--gold); }
.lang-btn .chev { width: 14px; height: 14px; color: var(--dim); transition: transform .2s; }
.lang.open .chev { transform: rotate(180deg); }
/* The language flags (website/build/flags/<code>.svg, drawn in a rounded 4:3
   box - Arabic is the flag of Egypt), exactly as on the landing page
   (landing.css): a frame with the flag's own corner radius (12.5 % of the
   width), a hairline edge so dark and white flags both stand off the dark
   panel, and a soft enamel sheen on top. js/auth-ui.js puts them in. */
.flag { position: relative; flex: none; display: inline-block; width: 24px; height: 18px; border-radius: 12.5% / 16.667%; overflow: hidden; background: rgba(255,255,255,.07);
  box-shadow: 0 0 0 1px rgba(255,255,255,.11), 0 2px 6px -1px rgba(0,0,0,.7); }
.flag img { display: block; width: 100%; height: 100%; max-width: none; }
.flag::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 48%, rgba(0,0,0,.12)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.22); }
.lang-btn .flag { width: 20px; height: 15px; }
/* the open list: every language on its own row - flag, then its own name -
   the current one in gold with a check mark at the end of its row */
.lang-list { display: none; position: absolute; inset-inline-end: 0; top: calc(100% + 10px); z-index: 60; width: 256px; max-height: min(calc(100vh - 96px), 720px); overflow: auto; overscroll-behavior: contain; padding: 7px;
  background: linear-gradient(180deg, #161D2F, #0F1420 70%); border: 1px solid rgba(233,169,60,.2); border-radius: 16px;
  box-shadow: 0 30px 70px -22px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
.lang.open .lang-list { display: block; animation: dd-in .16s ease-out; }
@keyframes dd-in { from { opacity: 0; transform: translateY(-6px); } }
.lang-list button + button { margin-top: 2px; }
.lang-list button { display: flex; align-items: center; gap: 13px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; cursor: var(--gc-click, pointer);
  color: var(--text); font: 400 14.5px/1.2 var(--body); text-align: start; transition: background-color .15s, color .15s; }
.lang-list button:hover { background: rgba(255,255,255,.06); }
.lang-list button:focus-visible { outline-offset: -2px; border-radius: 10px; }
.lang-list button[aria-current] { color: var(--gold-soft); background: linear-gradient(90deg, rgba(233,169,60,.17), rgba(233,169,60,.07)); box-shadow: inset 0 0 0 1px rgba(233,169,60,.24); font-weight: 600; }
.lang-list button[aria-current]::after { content: ""; flex: none; width: 16px; height: 16px; margin-inline-start: auto; background: var(--gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%206%209%2017l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%206%209%2017l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.lang-list button[aria-current] .flag { box-shadow: 0 0 0 1px rgba(246,212,136,.6), 0 2px 6px -1px rgba(0,0,0,.7); }

/* ---- page body: the showcase (wide screens) beside the card ---- */
.stage { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; padding: 4px 16px 40px; }
.shell { width: 100%; max-width: 1100px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: center; justify-items: center; }

/* the brand above the card on phones and tablets (the showcase replaces it on wide screens) */
.brand-mini { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.brand-mini img { width: 76px; filter: drop-shadow(0 10px 22px rgba(233,169,60,.4)); }
.brand-name { font: 900 26px/1 var(--brand); letter-spacing: .16em; padding-inline-start: .16em; background: linear-gradient(100deg, #b98526, #fff3d6 30%, var(--gold-soft) 52%, var(--gold) 70%, #b98526);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-sub { font: 600 10.5px/1 var(--head); letter-spacing: .26em; text-transform: uppercase; color: var(--dim); }

.showcase { display: none; }

/* ---- the card ---- */
.card { position: relative; width: 100%; max-width: 456px; padding: 22px 20px 24px; border-radius: 24px; border: 1px solid rgba(233,169,60,.32);
  background: radial-gradient(520px 220px at 50% -12%, rgba(233,169,60,.13), transparent 70%), linear-gradient(180deg, #141B2C, #0F1422);
  box-shadow: 0 40px 90px -40px rgba(233,169,60,.35), 0 30px 70px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.06); }
.card::before { content: ""; position: absolute; inset: 7px; border-radius: 18px; border: 1px solid rgba(233,169,60,.12); pointer-events: none; }
.card > * { position: relative; }

/* the two tabs side by side: Sign in | Create account */
.tabs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: rgba(5,8,14,.55); border: 1px solid var(--border2); }
.tab { min-height: 44px; padding: 6px 10px; border: 0; border-radius: 10px; background: transparent; cursor: var(--gc-click, pointer); color: var(--dim); text-decoration: none;
  display: flex; align-items: center; justify-content: center; text-align: center; font: 600 15px/1.2 var(--head); transition: color .15s, background-color .15s, box-shadow .15s; }
.tab:hover { color: var(--text); background: rgba(255,255,255,.04); }
.tab[aria-selected="true"] { color: #1E1405; background: linear-gradient(180deg, var(--gold-soft), var(--gold) 60%, var(--gold-deep)); box-shadow: 0 10px 24px -12px rgba(233,169,60,.8), inset 0 1px 0 rgba(255,255,255,.45); }

.back-in { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 4px; border: 0; background: none; cursor: var(--gc-click, pointer); color: var(--gold-soft);
  font: 600 14px/1.2 var(--head); text-decoration: none; }
.back-in:hover { text-decoration: underline; text-underline-offset: 3px; }
.back-in .ic { width: 17px; height: 17px; }

.head { margin: 22px 0 18px; text-align: center; }
h1[tabindex]:focus { outline: none; }
.head h1 { font: 700 25px/1.25 var(--head); color: var(--text); letter-spacing: -.005em; text-wrap: balance; }
.head p { margin-top: 6px; color: var(--dim); font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.head-ic { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 16px; color: var(--gold-soft);
  background: linear-gradient(160deg, rgba(233,169,60,.24), rgba(233,169,60,.06)); border: 1px solid rgba(233,169,60,.32); box-shadow: 0 10px 24px -14px rgba(233,169,60,.6); }
.head-ic .ic { width: 26px; height: 26px; }
.head-ic.ok { color: var(--emerald); background: linear-gradient(160deg, rgba(63,190,123,.24), rgba(63,190,123,.06)); border-color: rgba(63,190,123,.4); }
.head-ic.bad { color: var(--danger); background: linear-gradient(160deg, rgba(255,122,122,.2), rgba(255,122,122,.05)); border-color: rgba(255,122,122,.38); }

/* ---- fields ---- */
.field { margin-bottom: 14px; }
.field > label, .label-row label { display: block; margin: 0 2px 7px; font: 600 13.5px/1.3 var(--head); color: var(--text); }
/* a label with a link on the other side ("Password ... Forgot your password?"); a long pair wraps, the link then stays at the end */
.label-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0 12px; }
.label-row .link { min-height: 0; margin: 0 2px 7px; margin-inline-start: auto; font-size: 13.5px; }
.control { position: relative; }
.control > .ic { position: absolute; inset-inline-start: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--faint); pointer-events: none; transition: color .15s; }
/* the box's padding on PHYSICAL sides: a box that takes a name is dir="auto" and turns right to left
   when Arabic is typed in it, while its icon stays on the left (and the eye button on the right) */
.input { display: block; width: 100%; min-height: 50px; padding: 12px 14px 12px 44px; border-radius: var(--r2); border: 1px solid var(--border2);
  background: rgba(10,14,22,.72); color: var(--text); font: 400 16px/1.3 var(--body); outline: none; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.input::placeholder { color: #5F6782; }
.input:hover { border-color: rgba(255,255,255,.2); }
.input:focus { border-color: var(--gold); background: rgba(14,19,31,.9); box-shadow: 0 0 0 3px rgba(233,169,60,.18); }
.control:focus-within > .ic { color: var(--gold); }
.has-toggle .input { padding-right: 50px; }
/* a field with a message: framed red, its icon red too */
.input[aria-invalid="true"] { border-color: rgba(255,122,122,.75); box-shadow: 0 0 0 3px rgba(255,122,122,.14); }
.control:has(.input[aria-invalid="true"]) > .ic { color: var(--danger); }
/* the eye button inside a password box */
.pw-toggle { position: absolute; inset-inline-end: 4px; top: 50%; width: 42px; height: 42px; margin-top: -21px; display: grid; place-items: center; border: 0; border-radius: 10px;
  background: none; cursor: var(--gc-click, pointer); color: var(--dim); transition: color .15s, background-color .15s; }
.pw-toggle:hover { color: var(--gold-soft); background: rgba(233,169,60,.08); }
.pw-toggle .ic { width: 19px; height: 19px; }
.hint, .err, .caps { margin: 6px 2px 0; font-size: 13px; line-height: 1.45; }
.hint { color: var(--faint); }
/* while a field shows its error, its hint steps aside (one message under a field at a time) */
.field:has(.err:not([hidden])) .hint, .field:has(.suggest:not([hidden])) .hint { display: none; }
/* A field's message (js/auth-ui.js fieldError): the alert sign, then the reason. It fades in
   once, gently, where it stands - no pop-up, no shaking. */
.err { display: flex; align-items: flex-start; gap: 7px; color: #FFB4B4; animation: msg-in .2s ease-out; }
.err .ic, .suggest .ic { width: 15px; height: 15px; margin-top: 2px; }
.err .ic { color: var(--danger); }
.err > span, .suggest > span { min-width: 0; overflow-wrap: anywhere; }
@keyframes msg-in { from { opacity: 0; transform: translateY(-3px); } }
/* the characters a username can't have, each in a small box ("@", "#", an accent on its own) */
.err .ch { display: inline-block; min-width: 1.55em; margin: 0 1px; padding: 0 5px; border-radius: 5px; border: 1px solid rgba(255,122,122,.38);
  background: rgba(255,122,122,.1); color: #FFE1E1; font: 600 12.5px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align: center; white-space: pre; }
/* "Did you mean name@gmail.com?" under the e-mail box: a calm gold note, the address a button that puts it in */
.suggest { display: flex; align-items: flex-start; gap: 7px; margin: 6px 2px 0; font-size: 13px; line-height: 1.45; color: var(--dim); animation: msg-in .2s ease-out; }
.suggest .ic { color: var(--gold); }
.suggest-btn { display: inline; padding: 0; border: 0; background: none; cursor: var(--gc-click, pointer); color: var(--gold-soft); font: 600 13px/1.45 var(--body);
  text-decoration: underline; text-decoration-color: rgba(246,212,136,.45); text-underline-offset: 3px; unicode-bidi: isolate; }
.suggest-btn:hover { text-decoration-color: var(--gold-soft); }
.caps { color: var(--gold-soft); display: flex; align-items: center; gap: 6px; }
.caps .ic { width: 15px; height: 15px; }

.row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; margin: -2px 0 12px; }
.check { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; color: var(--dim); font-size: 14px; cursor: var(--gc-click, pointer); user-select: none; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--gold); cursor: var(--gc-click, pointer); }
.link { display: inline-flex; align-items: center; min-height: 40px; padding: 0; border: 0; background: none; cursor: var(--gc-click, pointer); color: var(--gold-soft);
  font: 600 14px/1.3 var(--body); text-decoration: none; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- messages (error / success / info) ---- */
.banner { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; padding: 11px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; border: 1px solid; }
.banner:empty { display: none; }
.banner .ic { width: 18px; height: 18px; margin-top: 1px; }
.banner.bad { color: #FFC4C4; background: rgba(255,122,122,.09); border-color: rgba(255,122,122,.35); }
.banner.ok { color: #BDF0D3; background: rgba(63,190,123,.09); border-color: rgba(63,190,123,.38); }
.banner.info { color: #F3DDAA; background: rgba(233,169,60,.08); border-color: rgba(233,169,60,.35); }
.banner p + p { margin-top: 4px; }

/* the captcha (Cloudflare Turnstile), shared by the three forms */
.cap-wrap { display: flex; justify-content: center; min-height: 65px; margin: 4px 0 14px; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 8px 22px; border-radius: 13px; border: 1px solid transparent; cursor: var(--gc-click, pointer);
  font: 600 16px/1.25 var(--head); text-decoration: none; text-align: center; transition: transform .15s ease, filter .15s ease, box-shadow .15s ease, background-color .15s, border-color .15s; }
.btn:hover { transform: translateY(-1px); }
.btn-block { display: flex; width: 100%; }
.btn-gold { color: #1E1405; background: linear-gradient(180deg, var(--gold-soft), var(--gold) 55%, var(--gold-deep)); box-shadow: 0 14px 32px -14px rgba(233,169,60,.75), inset 0 1px 0 rgba(255,255,255,.45); }
.btn-gold:hover { filter: brightness(1.07); box-shadow: 0 18px 38px -14px rgba(233,169,60,.85), inset 0 1px 0 rgba(255,255,255,.45); }
.btn-ghost { color: var(--text); background: rgba(255,255,255,.035); border-color: var(--border2); }
.btn-ghost:hover { background: rgba(255,255,255,.07); border-color: rgba(233,169,60,.4); }
.btn[disabled], .btn[aria-busy="true"] { cursor: var(--gc-arrow, progress); filter: saturate(.7) brightness(.92); transform: none; }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(30,20,5,.25); border-top-color: #1E1405; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.alt { margin-top: 18px; text-align: center; color: var(--dim); font-size: 14.5px; }
.alt button, .alt a { display: inline; min-height: 0; padding: 0; border: 0; background: none; cursor: var(--gc-click, pointer); color: var(--gold-soft); font: 600 14.5px/1.5 var(--body); text-decoration: none; }
.alt button:hover, .alt a:hover { text-decoration: underline; text-underline-offset: 3px; }

.foot { padding: 0 16px 22px; text-align: center; color: var(--faint); font-size: 12.5px; }

/* ---- the showcase: the landing page's crown emblem, a pitch and three facts ---- */
.showcase { text-align: center; }
.emblem { position: relative; width: 270px; aspect-ratio: 1; display: grid; place-items: center; margin-inline: auto; }
.rays { position: absolute; inset: -12%; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 6deg, rgba(233,169,60,.16) 6deg 8deg, transparent 8deg 15deg);
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent 74%); mask: radial-gradient(closest-side, #000 30%, transparent 74%); animation: spin 80s linear infinite; }
.halo { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(233,169,60,.32), rgba(233,169,60,.08) 55%, transparent 75%); }
.ring { position: absolute; inset: 9%; border-radius: 50%; border: 1px solid rgba(233,169,60,.22); box-shadow: inset 0 0 40px rgba(233,169,60,.08); }
.ring::before { content: ""; position: absolute; inset: 7%; border-radius: 50%; border: 1px dashed rgba(233,169,60,.16); }
.crown { position: relative; width: 84%; height: auto; margin-top: -4%; filter: drop-shadow(0 18px 30px rgba(0,0,0,.6)) drop-shadow(0 0 34px rgba(233,169,60,.35)); animation: bob 6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.pedestal { position: absolute; bottom: 6%; width: 62%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(233,169,60,.35), transparent 75%); filter: blur(2px); }
.show-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 2px; }
.show-brand .brand-name { font-size: 34px; }
.show-title { margin-top: 22px; font: 800 44px/1.08 var(--head); letter-spacing: -.01em; text-wrap: balance;
  background: linear-gradient(100deg, #c08a2a, #fff4d8 34%, var(--gold-soft) 54%, var(--gold) 74%, #c08a2a); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.show-lead { margin: 14px auto 0; color: var(--dim); font-size: 17px; line-height: 1.65; max-width: 500px; text-wrap: pretty; }
.facts { margin: 26px auto 0; display: grid; gap: 10px; max-width: 460px; text-align: start; }
.facts li { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-radius: 14px; border: 1px solid var(--border); background: linear-gradient(180deg, rgba(17,23,38,.7), rgba(22,29,46,.55));
  font: 600 15px/1.35 var(--head); color: var(--text); }
.facts .ic { width: 20px; height: 20px; color: var(--gold); }
.facts .ic.ok { color: var(--emerald); }

/* ---- wider screens ---- */
@media (min-width: 480px) {
  .top { padding: 18px 24px; }
  .card { padding: 26px 30px 28px; }
  .head h1 { font-size: 27px; }
}
@media (min-width: 960px) {
  .stage { padding: 8px 32px 48px; }
  .shell { grid-template-columns: minmax(0, 1fr) 456px; gap: 64px; justify-items: stretch; }
  .brand-mini { display: none; }
  .showcase { display: block; }
  .card { justify-self: end; }
}
@media (min-width: 1200px) { .show-title { font-size: 50px; } }
/* a page with the card only (reset-password.html): one centred column with the brand above it, at every width */
.single { grid-template-columns: minmax(0, 1fr) !important; justify-items: center !important; }
.single .brand-mini { display: flex; }
.single .card { justify-self: center; }
/* the narrowest phones (320 px): the captcha box is 300 px wide and must fit inside the card */
@media (max-width: 359px) {
  .top, .stage { padding-inline: 10px; }
  .card { padding-inline: 10px; border-radius: 20px; }
  .card::before { inset: 5px; }
  .back { padding-inline: 10px 12px; }
  /* Turnstile's box has a fixed 300 px layout width; drawn a little smaller here so it stays inside the card */
  .cap-wrap .cf-turnstile { transform: scale(.9); transform-origin: 50% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}