/* ============================================================================
   intag_access — INTAG-INVEST (إنتاج للإستثمار) csauth login/register theme.
   Deep-red brand identity (#900). Light-first, dark via prefers-color-scheme +
   [data-theme]. RTL via CSS logical properties. Strict CSP: this is the ONLY
   stylesheet; no inline styles, no CDN, system-fallback fonts.
   ========================================================================== */

/* ---- Tajawal (self-hosted for strict CSP) — the intag site's Arabic font ---- */
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/tajawal/tajawal-400-arabic.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/tajawal/tajawal-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/tajawal/tajawal-500-arabic.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/tajawal/tajawal-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/tajawal/tajawal-700-arabic.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/tajawal/tajawal-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/tajawal/tajawal-800-arabic.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/tajawal/tajawal-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ---- tokens: light (bare :root) --------------------------------------- */
:root {
  --brand-1:#b31217; --brand-2:#8a0000; --brand-3:#5f0000;   /* red panel gradient */
  --gold:#c8973f; --gold-soft:#f6dca6;

  --ground:#f3eeec;            /* warm off-white page */
  --paper:#ffffff;             /* card */
  --ink:#20191a;               /* primary text */
  --muted:#6d6462;             /* secondary text */
  --faint:#978f8c;             /* tertiary / placeholders */
  --line:#e7ded9;              /* borders */
  --line-soft:#f0e9e5;

  --field:#f7f2f0;             /* input rest */
  --field-focus:#ffffff;
  --accent:#990000;            /* the intag red, on-light */
  --accent-strong:#b3121a;
  --accent-tint:rgba(153,0,0,.07);
  --ring:rgba(153,0,0,.20);

  --ok:#1f7a4d; --ok-bg:rgba(31,122,77,.10);
  --err:#b3121a; --err-bg:rgba(179,18,26,.08); --err-line:rgba(179,18,26,.35);

  --shadow:0 1px 2px rgba(40,15,15,.05), 0 12px 34px rgba(40,15,15,.10);
  --shadow-card:0 2px 6px rgba(40,15,15,.05), 0 26px 60px rgba(45,12,12,.13);

  --r:16px; --r-sm:11px; --r-xs:8px;
  --ff: 'Tajawal', system-ui, -apple-system, "Segoe UI", Tahoma, Roboto, Helvetica, Arial, sans-serif;
}

/* ---- tokens: dark (system default, unless a light choice is stamped) --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#140c0c; --paper:#1e1514; --ink:#f1e8e5; --muted:#b6a29d; --faint:#8a7975;
    --line:#392625; --line-soft:#2a1c1b;
    --field:#271a19; --field-focus:#2e201e;
    --accent:#e2543f; --accent-strong:#f06d57; --accent-tint:rgba(226,84,63,.12); --ring:rgba(226,84,63,.30);
    --ok:#54c78a; --ok-bg:rgba(84,199,138,.12);
    --err:#f0705c; --err-bg:rgba(240,112,92,.12); --err-line:rgba(240,112,92,.4);
    --gold:#d9ad5e;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 34px rgba(0,0,0,.5);
    --shadow-card:0 2px 6px rgba(0,0,0,.35), 0 30px 64px rgba(0,0,0,.55);
  }
}
/* ---- tokens: explicit toggle wins in both directions ------------------- */
:root[data-theme="dark"] {
  --ground:#140c0c; --paper:#1e1514; --ink:#f1e8e5; --muted:#b6a29d; --faint:#8a7975;
  --line:#392625; --line-soft:#2a1c1b;
  --field:#271a19; --field-focus:#2e201e;
  --accent:#e2543f; --accent-strong:#f06d57; --accent-tint:rgba(226,84,63,.12); --ring:rgba(226,84,63,.30);
  --ok:#54c78a; --ok-bg:rgba(84,199,138,.12);
  --err:#f0705c; --err-bg:rgba(240,112,92,.12); --err-line:rgba(240,112,92,.4);
  --gold:#d9ad5e;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 34px rgba(0,0,0,.5);
  --shadow-card:0 2px 6px rgba(0,0,0,.35), 0 30px 64px rgba(0,0,0,.55);
}

/* ---- reset ------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; min-height:100vh; min-height:100dvh; background:var(--ground); color:var(--ink);
  font-family:var(--ff); font-size:16px; line-height:1.55; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
button{ font:inherit; color:inherit; cursor:pointer; }
h1,h2,p,ul{ margin:0; }

/* ============================================================================
   LAYOUT — split: brand panel + form panel
   ========================================================================== */
.auth{
  min-height:100vh; min-height:100dvh; display:flex; align-items:stretch;
}
.brand-panel{ flex:1 1 46%; position:relative; overflow:hidden;
  background:linear-gradient(150deg, var(--brand-1) 0%, var(--brand-2) 52%, var(--brand-3) 100%);
  color:#fdeeee; display:flex; }
.form-panel{ flex:1 1 54%; display:flex; flex-direction:column; min-width:0;
  padding:clamp(20px,4vw,54px); }

/* ---- brand panel decoration ------------------------------------------- */
.brand-motif{ position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 88% -6%, rgba(255,210,140,.16), transparent 60%),
    radial-gradient(90% 70% at -10% 108%, rgba(0,0,0,.42), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0 2px, transparent 2px 26px);
}
.brand-motif::after{ content:""; position:absolute; inset-inline-end:-12%; bottom:-16%;
  width:min(520px,66%); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.10), transparent 62%); }

.brand-inner{ position:relative; margin:auto; width:100%;
  max-width:440px; padding:clamp(30px,5vw,64px) clamp(26px,4.4vw,60px);
  display:flex; flex-direction:column; gap:24px; }

.brand-lockup{ display:flex; align-items:center; gap:14px; }
.ig-mark{ width:52px; height:52px; flex:none; filter:drop-shadow(0 6px 14px rgba(0,0,0,.28)); }
.brand-words{ display:flex; flex-direction:column; line-height:1.1; }
.brand-ar{ font-size:26px; font-weight:800; letter-spacing:.2px; color:#fff; }
.brand-en{ font-size:12.5px; font-weight:600; letter-spacing:3px; text-transform:uppercase;
  color:var(--gold-soft); margin-top:4px; }

.brand-tagline{ font-size:clamp(23px,2.5vw,31px); font-weight:800; line-height:1.28;
  color:#fff; text-wrap:balance; max-width:20ch; }
.brand-sub{ font-size:15.5px; color:#f3cfcf; line-height:1.7; max-width:40ch; }

.brand-trust{ list-style:none; padding:0; margin-top:6px; display:flex; flex-direction:column; gap:15px; }
.brand-trust li{ display:flex; align-items:center; gap:13px; font-size:15px; color:#fbe6e6; }
.brand-trust svg{ width:26px; height:26px; flex:none; fill:none;
  stroke:var(--gold-soft); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.brand-trust li span{ padding-block:2px; }

/* ============================================================================
   FORM PANEL top row — brand-mini + lang switch + theme toggle
   ========================================================================== */
.panel-top{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-bottom:auto; }
.brand-mini{ display:inline-flex; align-items:center; gap:10px; color:var(--ink);
  font-weight:800; font-size:15px; letter-spacing:.4px; }
.brand-mini:hover{ text-decoration:none; }
.brand-mini .ig-mark{ width:34px; height:34px; }
.brand-mini span{ opacity:.92; }

.controls{ display:inline-flex; align-items:center; gap:8px; }
.langs{ display:inline-flex; align-items:center; gap:2px; padding:3px;
  background:var(--field); border:1px solid var(--line); border-radius:999px; }
.langs a{ padding:5px 12px; border-radius:999px; font-size:13px; font-weight:700;
  color:var(--muted); line-height:1; }
.langs a:hover{ color:var(--ink); text-decoration:none; }
.langs a.on{ background:var(--paper); color:var(--accent); box-shadow:0 1px 3px rgba(40,15,15,.12); }

.theme-toggle{ width:38px; height:38px; display:inline-grid; place-items:center;
  background:var(--field); border:1px solid var(--line); border-radius:50%; color:var(--muted);
  transition:color .18s, border-color .18s, background .18s; }
.theme-toggle:hover{ color:var(--accent); border-color:var(--accent); }
.theme-toggle svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; }
.theme-toggle .i-moon{ display:none; }
:root[data-theme="dark"] .theme-toggle .i-sun{ display:none; }
:root[data-theme="dark"] .theme-toggle .i-moon{ display:block; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .i-sun{ display:none; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon{ display:block; }
}

/* ============================================================================
   CARD + form
   ========================================================================== */
.card{ width:100%; max-width:410px; margin:26px auto; align-self:center;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-card); padding:clamp(24px,3.4vw,38px);
  animation:rise .5s cubic-bezier(.16,.84,.44,1) both; }
.card-head{ margin-bottom:22px; }
.card-head h1{ font-size:26px; font-weight:800; letter-spacing:-.2px; color:var(--ink);
  text-wrap:balance; }
.card-head .lead{ margin-top:7px; font-size:14.5px; color:var(--muted); }

/* fields */
form{ display:flex; flex-direction:column; gap:16px; }
.field-wrap{ display:flex; flex-direction:column; gap:7px; }
.field-label{ font-size:13px; font-weight:700; color:var(--ink); letter-spacing:.15px; }

.control{ position:relative; display:flex; align-items:center;
  background:var(--field); border:1.5px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .16s, background .16s, box-shadow .16s; }
.control:focus-within{ border-color:var(--accent); background:var(--field-focus);
  box-shadow:0 0 0 4px var(--ring); }
.input-icon{ position:absolute; inset-inline-start:13px; display:grid; place-items:center;
  color:var(--faint); pointer-events:none; }
.input-icon svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; }
.control:focus-within .input-icon{ color:var(--accent); }

.control input, .control select{ width:100%; border:0; outline:0; background:transparent;
  color:var(--ink); font:inherit; font-size:15px; line-height:1.4;
  padding:13px 15px; padding-inline-start:42px; border-radius:var(--r-sm); }
.control input::placeholder{ color:var(--faint); }
.control input:-webkit-autofill{ -webkit-text-fill-color:var(--ink);
  transition:background-color 6000s; }

/* select */
.control-select{ }
.control select{ appearance:none; -webkit-appearance:none; cursor:pointer;
  padding-inline-end:40px; }
.control select option{ color:#20191a; }
.select-caret{ position:absolute; inset-inline-end:13px; display:grid; place-items:center;
  color:var(--faint); pointer-events:none; }
.select-caret svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }

/* password toggle */
.pw-toggle{ position:absolute; inset-inline-end:6px; width:34px; height:34px; border:0;
  background:transparent; color:var(--faint); display:grid; place-items:center; border-radius:8px; }
.pw-toggle:hover{ color:var(--accent); background:var(--accent-tint); }
.pw-toggle svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; }
.pw-toggle .i-hide{ display:none; }
.pw-toggle.is-on .i-show{ display:none; }
.pw-toggle.is-on .i-hide{ display:block; }
.control input[name="password"]{ padding-inline-end:44px; }

.hint{ font-size:12px; color:var(--faint); line-height:1.5; }
.fe{ font-size:12.5px; font-weight:600; color:var(--err); }
.field-wrap.has-error .control{ border-color:var(--err-line); background:var(--err-bg); }
.field-wrap.has-error .input-icon{ color:var(--err); }

/* alerts / notice */
.alert, .notice{ display:flex; align-items:flex-start; gap:11px; padding:13px 15px;
  border-radius:var(--r-sm); font-size:14px; line-height:1.5; margin-bottom:18px; }
.alert{ background:var(--err-bg); color:var(--err); border:1px solid var(--err-line); }
.notice{ background:var(--ok-bg); color:var(--ok); border:1px solid transparent; }
.alert svg, .notice svg{ width:20px; height:20px; flex:none; margin-top:1px; fill:none;
  stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.alert div div{ margin-top:2px; }
.alert div div:first-child{ margin-top:0; }

/* primary button */
.btn-primary{ margin-top:6px; width:100%; border:0; border-radius:var(--r-sm);
  padding:14px 20px; font-size:15.5px; font-weight:800; letter-spacing:.2px; color:#fff;
  text-decoration:none;
  background:linear-gradient(135deg, var(--brand-1), var(--brand-2));
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  box-shadow:0 10px 22px rgba(140,10,10,.28); transition:filter .16s, transform .12s, box-shadow .16s; }
.btn-primary:hover{ filter:brightness(1.07); box-shadow:0 13px 26px rgba(140,10,10,.34); text-decoration:none; }
.btn-primary:active{ transform:translateY(1px); }
.btn-arrow{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .16s; }
.btn-primary:hover .btn-arrow{ transform:translateX(3px); }

/* switch link */
.switch{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line-soft);
  text-align:center; font-size:14px; color:var(--muted); }
.switch a{ font-weight:700; }

/* thank-you page (post-registration) */
.ty{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px; padding:6px 0 4px; }
.ty-badge{ width:74px; height:74px; display:grid; place-items:center; border-radius:50%;
  background:var(--ok-bg); color:var(--ok); margin-bottom:4px; }
.ty-badge svg{ width:38px; height:38px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
.ty h1{ font-size:24px; font-weight:800; color:var(--ink); text-wrap:balance; }
.ty .lead{ color:var(--muted); font-size:15px; line-height:1.65; max-width:36ch; }
.ty .btn-primary{ margin-top:12px; width:auto; padding-inline:30px; }

/* footer */
.foot{ display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:14px; font-size:12.5px; color:var(--faint); }
.foot svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; }

/* honeypot — hidden without inline style (CSP). MUST NOT use left:-9999px: in RTL that
   off-screen offset becomes real horizontal overflow (scroll origin is on the right) →
   mobile browsers zoom out to fit it → the whole page renders as a blank sliver. Clip
   instead — hidden from humans, still in the DOM + fillable by bots, zero overflow. */
.hp{ position:absolute!important; width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important; border:0!important; overflow:hidden!important;
  clip:rect(0,0,0,0)!important; clip-path:inset(50%)!important; white-space:nowrap!important;
  pointer-events:none; }

/* ============================================================================
   RTL — mostly automatic via logical props; patch the directional glyphs
   ========================================================================== */
[dir="rtl"] .brand-en{ letter-spacing:2px; }
[dir="rtl"] .btn-arrow{ transform:scaleX(-1); }
[dir="rtl"] .btn-primary:hover .btn-arrow{ transform:scaleX(-1) translateX(3px); }
[dir="rtl"] .brand-mini{ letter-spacing:0; }

/* ============================================================================
   RESPONSIVE — stack under 900px; compact brand band on mobile
   ========================================================================== */
@media (max-width:900px){
  .auth{ flex-direction:column; }
  .brand-panel{ flex:none; }
  .brand-inner{ max-width:560px; gap:16px; padding:26px 24px 30px; }
  .brand-tagline{ font-size:22px; max-width:none; }
  .brand-sub{ display:none; }
  .brand-trust{ flex-direction:row; flex-wrap:wrap; gap:10px 22px; margin-top:2px; }
  .brand-trust li{ font-size:13.5px; }
  .brand-trust svg{ width:22px; height:22px; }
  .form-panel{ flex:1; padding:18px 18px 26px; }
  .card{ margin:18px auto; }
}
@media (max-width:900px){
  /* brand-mini duplicates the panel identity on desktop; hide on mobile to reduce noise */
  .brand-mini .ig-mark{ display:none; }
}
@media (max-width:520px){
  .card{ padding:22px 18px; border-radius:14px; }
  .card-head h1{ font-size:23px; }
  .brand-ar{ font-size:23px; }
  .panel-top{ flex-wrap:wrap; }
}

/* motion / a11y */
/* transform-only (no opacity) — a font-swap reflow mid-animation on mobile must never leave the card invisible */
@keyframes rise{ from{ transform:translateY(14px); } to{ transform:none; } }
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; }
}
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
.control:focus-within :focus-visible{ outline:none; }