/* Gnzub — black at night, white by day, gold throughout.

   Everything downstream reads these tokens, so the two themes are this
   block twice over and nothing else. The accent names are historical
   (--blue, --purple): they are the accent and its lighter partner, and
   renaming them would mean touching every rule that uses them. */
:root{
  color-scheme: dark;
  --bg:#0B0B0C;
  --bg-deep:#000000;
  --panel:#19191C;
  --panel-2:#121214;
  --panel-3:#0F0F11;
  --panel-4:#09090B;
  --line:rgba(212,175,55,.24);
  --line-soft:rgba(255,255,255,.09);
  --text:#C6C3BB;
  --text-2:#E6E2D8;
  --head:#FFFFFF;
  --muted:#8B887F;
  --blue:#D4AF37;            /* the gold */
  --blue-2:#A8841F;
  --purple:#EBD07A;          /* lighter gold, for gradients and second series */
  --green:#4CC38A;
  --red:#E5544B;
  --amber:#D4AF37;
  /* The quality-score ramp. It used to be four hex literals inside
     scoreColor(), which meant it could not follow the theme: the dark-mode
     green and amber were being painted onto white, where #F59E0B scored
     2.15 against a 4.5 requirement and #22C55E scored 2.28. Every score on
     the screener was close to unreadable in day mode. As tokens they get a
     light variant like everything else. */
  --score-hi:#4CC38A;
  --score-mid:#D4AF37;
  --score-lo:#F97316;
  --score-bad:#E5544B;
  --grad:linear-gradient(135deg,#D4AF37,#A8841F);
  --grad-text:linear-gradient(135deg,#EBD07A,#D4AF37);
  --shadow:0 18px 44px rgba(0,0,0,.55);
  --r:0;
  --nav-h:72px;

  /* Tints of the accent, mixed at use time. Defined once: they read --blue
     through var(), so the day palette redefining --blue carries them with
     it and there is no second set to keep in step. */
  --tint-05:color-mix(in srgb, var(--blue) 7%, transparent);
  --tint-10:color-mix(in srgb, var(--blue) 14%, transparent);
  --tint-20:color-mix(in srgb, var(--blue) 26%, transparent);
  --tint-40:color-mix(in srgb, var(--blue) 48%, transparent);
  --glow:color-mix(in srgb, var(--blue) 30%, transparent);
}

/* Day: white paper, a deeper gold so it still reads as gold rather than
   washing out, and real borders — on white the panels share the page
   colour, so the edge is the only thing separating them. */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme: light;
    --bg:#FFFFFF;
    --bg-deep:#F7F5F0;
    --panel:#FFFFFF;
    --panel-2:#FFFFFF;
    --panel-3:#F7F5F0;
    --panel-4:#F2EFE7;
    --line:rgba(154,123,31,.30);
    --line-soft:rgba(26,24,20,.12);
    --text:#4A4740;
    --text-2:#2C2A25;
    --head:#121110;
    --muted:#726F67;      /* 5.02 on white; #7C7970 was 4.35 */
    --blue:#9A7B1F;
    --blue-2:#7A6016;
    --purple:#B9912A;
    --green:#17804A;        /* 4.97 on white; #1F8A52 was 4.36 and just missed */
    --red:#C0392F;
    --amber:#9A7B1F;
    --score-hi:#1A7F4B;     /* 5.02 */
    --score-mid:#8A6D15;    /* 4.91, was 2.15 */
    --score-lo:#9A4312;     /* 6.59, was 2.80 */
    --score-bad:#C0392F;    /* 5.43, was 3.76 */
    --grad:linear-gradient(135deg,#B9912A,#7A6016);
    --grad-text:linear-gradient(135deg,#9A7B1F,#7A6016);
    --shadow:0 14px 34px rgba(26,24,20,.12);
  }
}
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#FFFFFF;
  --bg-deep:#F7F5F0;
  --panel:#FFFFFF;
  --panel-2:#FFFFFF;
  --panel-3:#F7F5F0;
  --panel-4:#F2EFE7;
  --line:rgba(154,123,31,.30);
  --line-soft:rgba(26,24,20,.12);
  --text:#4A4740;
  --text-2:#2C2A25;
  --head:#121110;
  --muted:#726F67;
  --blue:#9A7B1F;
  --blue-2:#7A6016;
  --purple:#B9912A;
  --green:#17804A;        /* 4.97 on white; #1F8A52 was 4.36 and just missed */
  --red:#C0392F;
  --amber:#9A7B1F;
  --score-hi:#1A7F4B;     /* 5.02 */
  --score-mid:#8A6D15;    /* 4.91, was 2.15 */
  --score-lo:#9A4312;     /* 6.59, was 2.80 */
  --score-bad:#C0392F;    /* 5.43, was 3.76 */
  --grad:linear-gradient(135deg,#B9912A,#7A6016);
  --grad-text:linear-gradient(135deg,#9A7B1F,#7A6016);
  --shadow:0 14px 34px rgba(26,24,20,.12);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Inter for the interface, Poppins kept for the wordmark alone.
   Two reasons, and the second is not cosmetic:

   Every fintech product worth copying sets its interface in a neutral
   grotesque — Stripe, Ramp and Robinhood on custom ones, Wise on this
   exact face. Poppins is a geometric display face; it is charming at 52px
   and mushy at 13px, which is most of this site.

   And Poppins has no tabular figures. The .mono rule has been asking for
   them all along and silently getting nothing: a 1 and a 0 differed by 5px,
   so no column of prices on this site has ever actually lined up. Inter
   ships them, so the request now has somewhere to land. */
body{
  background:var(--bg);
  color:var(--text);
  font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
/* 600, not 800. Four of the five fintech sites measured for this set their
   headings between 300 and 480 and let size and whitespace carry the
   hierarchy; 800 everywhere is what made this site read as a brochure
   rather than an instrument. The tracking tightens as the size grows,
   which is the other half of why their headings look settled. */
h1,h2,h3,h4{color:var(--head);margin:0 0 .5em;font-weight:600;letter-spacing:-.022em;line-height:1.15}
h1{font-size:52px;letter-spacing:-.034em}
h2{font-size:34px;letter-spacing:-.028em}
h3{font-size:19px;letter-spacing:-.016em}
p{margin:0 0 1em}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.muted{color:var(--muted)}
.center{text-align:center}
/* Both, deliberately: font-variant-numeric is the standard property and
   font-feature-settings is what older engines actually honour. Inter
   answers either one. */
.mono,.kpi .v,td.num,th.num,.quote-top .px{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* ---------- nav ---------- */
/* On white the panels are the same colour as the page, so the border and a
   soft lift are what separate them. */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .panel,
  :root:not([data-theme="dark"]) .kpi,
  :root:not([data-theme="dark"]) .step,
  :root:not([data-theme="dark"]) .mstrip,
  :root:not([data-theme="dark"]) .quote{ box-shadow:0 1px 2px rgba(26,24,20,.05) }
}
:root[data-theme="light"] .panel,
:root[data-theme="light"] .kpi,
:root[data-theme="light"] .step,
:root[data-theme="light"] .mstrip,
:root[data-theme="light"] .quote{ box-shadow:0 1px 2px rgba(26,24,20,.05) }

/* ---------- theme toggle ---------- */
/* Sign in / the signed-in name, beside the theme and language buttons. */
.navacct{
  display:inline-flex;align-items:center;height:34px;padding:0 12px;flex:0 0 auto;
  font-size:13px;font-weight:600;color:var(--head);white-space:nowrap;
  background:var(--panel-3);border:1px solid var(--line-soft);text-decoration:none;
}
.navacct:hover{border-color:var(--tint-40);text-decoration:none}
.navacct.me{width:34px;padding:0;justify-content:center;font-size:14px;font-weight:700;color:var(--blue)}
/* The account page's form fields. */
.auth-form input[type=email],.auth-form input[type=password]{
  width:100%;padding:10px 12px;font:inherit;font-size:15px;color:var(--head);
  background:var(--panel-2);border:1px solid var(--line);border-radius:0;outline:none;
}
.auth-form input:focus{border-color:var(--tint-40)}
.auth-form .btn{width:100%;justify-content:center}
.auth-msg{font-size:13.5px;margin-top:12px}
.auth-msg.err{color:var(--red)}
.auth-msg.ok{color:var(--green)}
.auth-or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted);font-size:12.5px}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.themetoggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;cursor:pointer;flex:0 0 auto;
  background:var(--panel-3);border:1px solid var(--line-soft);color:var(--blue);
  font-family:inherit;line-height:1;padding:0;
}
.themetoggle:hover{border-color:var(--line);color:var(--head)}
.themetoggle svg{display:block}

header.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  height:var(--nav-h);background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.nav-in{height:100%;display:flex;align-items:center;gap:20px;flex-wrap:nowrap}
.logo{display:flex;align-items:center;font-weight:800;font-size:20px;color:var(--head);
  font-family:Poppins,Inter,sans-serif;letter-spacing:-.02em}
.logo:hover{text-decoration:none}
/* Shrink before the search does, and scroll whatever will not fit. With
   `flex:1` the links grew to fill the bar and left the search zero width;
   eight links that scroll are a normal nav, a 0px search box is not. */
.nav-links{display:flex;gap:14px;margin-inline-start:6px;flex:0 1 auto;min-width:0;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{color:var(--text);font-size:14px;font-weight:500;padding:6px 0;white-space:nowrap;border-bottom:2px solid transparent}
.nav-links a:hover{color:var(--head);text-decoration:none}
.nav-links a.active{color:var(--head);border-bottom-color:var(--blue)}
/* The nav's own search. Narrower than the page-level boxes and allowed to
   shrink, because it shares a fixed bar with eight links and four controls
   and must give way before any of them wrap. */
.navsearch{flex:1 1 180px;min-width:150px;max-width:260px;margin-inline-start:auto}
.navsearch input[type=text]{padding:7px 12px 7px 34px;font-size:13.5px}
.navsearch .ico{inset-inline-start:11px}
.navsearch .suggest{min-width:260px}

.nav-cta{display:flex;align-items:center;gap:8px;flex:0 0 auto}
main{padding-top:var(--nav-h)}

/* The menu button, and the links as a menu, for when they do not fit
   (fitNav in app.js decides). The header's backdrop-filter makes it the
   containing block for the fixed panel, so the panel hangs from the bar's
   bottom edge across its full width. */
.navburger{display:none;color:var(--head)}
header.nav.collapsed .navburger{display:inline-flex}
.nav-links .nav-acct-item{display:none}
header.nav.collapsed .nav-links .nav-acct-item{display:block}
header.nav.collapsed .navacct{display:none}
header.nav.collapsed .nav-links{display:none}
header.nav.collapsed .nav-cta{margin-inline-start:auto}
header.nav.collapsed.open .nav-links{
  display:flex;flex-direction:column;gap:0;margin:0;overflow:auto;
  position:fixed;top:var(--nav-h);left:0;right:0;z-index:49;
  max-height:calc(100vh - var(--nav-h));padding:4px 16px 12px;
  background:var(--bg);border-bottom:1px solid var(--line);
}
header.nav.collapsed.open .nav-links a{
  padding:14px 4px;font-size:16px;border-bottom:1px solid var(--line-soft);
}
header.nav.collapsed.open .nav-links a:last-child{border-bottom:0}
header.nav.collapsed.open .nav-links a.active{color:var(--blue);border-bottom-color:var(--line-soft)}
header.nav.collapsed.open .navburger{border-color:var(--tint-40)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 32px;border-radius:var(--r);font-size:15px;font-weight:600;
  border:0;cursor:pointer;font-family:inherit;transition:.18s;
  background:var(--grad);color:#fff;box-shadow:0 8px 24px var(--glow);
}
.btn:hover{text-decoration:none;transform:translateY(-1px);box-shadow:0 12px 30px var(--glow)}
.btn.ghost{background:var(--tint-10);color:var(--head);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{background:var(--tint-10)}
.btn.sm{padding:8px 18px;font-size:14px;border-radius:0}
.btn.link{background:none;box-shadow:none;color:var(--blue);padding:0;font-weight:600}

/* ---------- panels ---------- */
.panel{background:var(--panel-2);border:1px solid var(--line-soft);border-radius:0;padding:24px}
.panel.deep{background:var(--panel-4)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.panel-head h3{margin:0}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:0;font-size:13px;font-weight:600;
  background:var(--tint-10);border:1px solid var(--tint-20);color:var(--blue);
}
.tag{display:inline-block;padding:3px 10px;border-radius:0;font-size:12px;font-weight:600}
.tag.blue{background:var(--tint-10);color:var(--blue)}
.tag.green{background:rgba(34,197,94,.10);color:var(--green)}
.tag.red{background:rgba(239,68,68,.10);color:var(--red)}
.tag.amber{background:rgba(245,158,11,.12);color:var(--amber)}
.up{color:var(--green)}
.down{color:var(--red)}

/* ---------- hero ---------- */
.hero{position:relative;padding:96px 0 80px;overflow:hidden}
.hero:before{
  content:"";position:absolute;inset:-20% -10% auto -10%;height:620px;pointer-events:none;
  background:radial-gradient(45% 55% at 20% 30%,var(--tint-20),transparent 70%),
             radial-gradient(40% 50% at 80% 20%,var(--tint-10),transparent 70%);
}
.hero-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.hero p.lead{font-size:17px;max-width:460px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

.quote-card{background:var(--panel);border:1px solid var(--line);border-radius:0;padding:22px}
.quote-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.quote-top .tkr{font-weight:600;color:var(--blue)}
.quote-top .nm{color:var(--text-2)}
.quote-top .px{margin-inline-start:auto;font-weight:600;color:var(--head);font-size:18px}
.score-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.score-card{background:var(--panel-3);border:1px solid var(--line-soft);border-radius:0;padding:16px;text-align:center}
.score-card .lbl{font-size:13px;font-weight:600;color:var(--text-2);margin-bottom:8px}
.score-card .more{font-size:12.5px;color:var(--blue);font-weight:600;margin-top:6px}

/* ---------- stats strip ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:44px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.stat{text-align:center}
.stat .v{font-size:38px;font-weight:600;letter-spacing:-.03em;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.1}
.stat .k{font-size:13.5px;color:var(--muted);margin-top:4px}

/* ---------- feature rows ---------- */
.feature{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center;padding:96px 0}
.feature.flip .fcopy{order:2}
.feature .kicker{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.ticks{list-style:none;margin:22px 0 0;padding:0}
.ticks li{display:flex;gap:8px;align-items:flex-start;margin-bottom:12px;font-size:14.5px}
.ticks li:before{
  content:"\2713";flex:0 0 20px;height:20px;margin-top:2px;border-radius:50%;
  background:rgba(34,197,94,.12);color:var(--green);
  font-size:12px;font-weight:700;line-height:20px;text-align:center;
}

/* ---------- tables ---------- */
/* Scrolls at any width, not just on a phone. The screener is thirteen
   columns with headers that must not wrap, so its natural width passes the
   panel on a normal desktop too — and without this the last columns and the
   star simply drew outside the panel's edge. */
.table-scroll{overflow-x:auto;max-width:100%}
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{
  text-align:start;color:var(--text-2);font-size:11.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;padding:10px 8px;
  border-bottom:1px solid var(--line);white-space:nowrap;
}
/* The screener is the exception: two-word headers break onto two lines,
   which is what lets its twelve columns sit inside the panel on a normal
   desktop instead of scrolling. Bottom-aligned so the one-line headers
   sit on the same baseline as the second line of the others. */
#screener thead th{white-space:normal;vertical-align:bottom}
/* The company name under each ticker, capped so the longest one on the
   page does not set the column. Narrower where the panel is. */
.sc-name{min-width:0;max-width:180px}
@media (max-width:1100px){ .sc-name{max-width:130px} }
tbody td{padding:13px 8px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--tint-05)}
td.num,th.num{text-align:end;font-variant-numeric:tabular-nums}
.t-sub{font-size:12px;color:var(--muted)}
.avatar{
  position:relative;overflow:hidden;
  width:36px;height:36px;border-radius:0;display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;font-size:13.5px;color:#fff;background:var(--grad);flex:0 0 auto;
}
.avatar i{font-style:normal;line-height:1}
/* No backdrop and no padding: tools/fetch_logos.py makes every logo a square
   opaque tile, so the file fills the mark edge to edge and a white box drawn
   here would only frame it. Removing the img on error uncovers the initials
   underneath. */
.avatar img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.cellflex{display:flex;align-items:center;gap:8px}
.quote{margin-inline-start:22px}       /* the price block beside a stock's name */
/* Stock page header: the full width of the page, so the price box ends
   where the panels below it end. */
.page-head > #head{flex:1 1 auto;min-width:0}
.stock-head{display:flex;align-items:flex-start;gap:24px}
.stock-head .sh-main{flex:1 1 auto;min-width:0}
.stock-head .sh-id{display:flex;align-items:center;gap:16px}
.stock-head .sh-id h1{line-height:1.1}
.stock-head .halal-note{margin-top:14px}
.stock-head .quote{margin-inline-start:auto;flex:0 0 auto}

/* ---------- steps / testimonials ---------- */
.section{padding:96px 0}
.section.alt{background:var(--panel-4)}
.sec-head{text-align:center;max-width:640px;margin:0 auto 46px}
.sec-head p{color:var(--muted)}
.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{background:var(--panel-2);border:1px solid var(--line-soft);border-radius:0;padding:28px}
.step .n{width:40px;height:40px;border-radius:0;background:var(--grad);color:#fff;font-weight:800;
  display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.quote{background:var(--panel-2);border:1px solid var(--line-soft);border-radius:0;padding:26px}
.quote p{font-style:italic;color:var(--text-2)}
.who{display:flex;align-items:center;gap:12px;margin-top:18px}
.who .nmm{font-weight:600;color:var(--head);font-size:14px}

/* ---------- cta + footer ---------- */
.cta{
  margin:72px auto;border-radius:0;padding:56px 24px;text-align:center;
  background:linear-gradient(135deg,var(--tint-10),var(--tint-05));
  border:1px solid var(--tint-20);
}
footer{border-top:1px solid var(--line-soft);padding:28px 0;font-size:13.5px;color:var(--muted)}
.foot-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-in a{color:var(--muted)}

/* ---------- app shell ---------- */
.page{padding:calc(var(--nav-h) + 36px) 0 72px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.page-head h1{font-size:32px;margin:0}
.page-head p{margin:6px 0 0;color:var(--muted);font-size:14px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stack{display:flex;flex-direction:column;gap:24px}

.kpi{background:var(--panel-2);border:1px solid var(--line-soft);border-radius:0;padding:18px}
.kpi .k{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700}
.kpi .v{font-size:26px;font-weight:600;color:var(--head);margin-top:6px;letter-spacing:-.02em}
.kpi .s{font-size:12.5px;color:var(--muted);margin-top:2px}

/* search */
.search{position:relative;max-width:420px;width:100%}
.search input[type=text]{
  width:100%;padding:12px 16px 12px 42px;border-radius:0;font-family:inherit;font-size:14.5px;
  background:var(--panel-3);border:1px solid var(--line-soft);color:var(--head);outline:none;
}
.search input:focus{border-color:var(--tint-40);box-shadow:0 0 0 3px var(--tint-10)}
.search .ico{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);opacity:.6}
.suggest{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;max-height:320px;overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:0;padding:6px;display:none;
  box-shadow:0 20px 50px rgba(0,0,0,.45);
}
.suggest.on{display:block}
.suggest div{padding:9px 12px;border-radius:0;cursor:pointer;display:flex;gap:8px;align-items:baseline}
.suggest div:hover,.suggest div.sel{background:var(--tint-10)}
.suggest b{color:var(--head);min-width:56px}
.suggest span{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* form controls */
label.fld{display:block;margin-bottom:16px}
label.fld .lb{display:flex;justify-content:space-between;font-size:12.5px;font-weight:600;color:var(--text-2);margin-bottom:6px}
label.fld .lb b{color:var(--head);font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--blue);height:4px}
input[type=number],input[type=text],select{
  width:100%;padding:10px 12px;border-radius:0;font-family:inherit;font-size:14px;
  background:var(--panel-3);border:1px solid var(--line-soft);color:var(--head);outline:none;
}
input:focus,select:focus{border-color:var(--tint-40)}

/* tabs */
.tabs{display:flex;gap:8px;border-bottom:1px solid var(--line-soft);margin-bottom:22px;flex-wrap:wrap}
.tabs button{
  background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);
  font-family:inherit;font-size:14px;font-weight:600;padding:10px 14px;cursor:pointer;
}
.tabs button.on{color:var(--head);border-bottom-color:var(--blue)}
.tabpane{display:none}
.tabpane.on{display:block}

.bar{height:7px;border-radius:0;background:rgba(148,163,184,.14);overflow:hidden}
.bar i{display:block;height:100%;border-radius:0;background:var(--grad)}

.verdict{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:0;font-weight:600;font-size:13px}
.verdict.good{background:rgba(34,197,94,.12);color:var(--green)}
.verdict.bad{background:rgba(239,68,68,.12);color:var(--red)}
.verdict.mid{background:rgba(245,158,11,.14);color:var(--amber)}

.note{font-size:12.5px;color:var(--muted);margin-top:14px}

/* ---------- live feed pill + settings modal ---------- */
@keyframes gnzubPulse{0%,100%{opacity:1}50%{opacity:.35}}
.livepill{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  padding:7px 13px;border-radius:0;font-family:inherit;font-size:12.5px;font-weight:600;
  background:var(--panel-3);border:1px solid var(--line-soft);color:var(--text-2);white-space:nowrap;
}
.livepill:hover{border-color:var(--tint-40);color:var(--head)}
.modal-back{
  position:fixed;inset:0;z-index:100;background:rgba(6,11,26,.72);
  backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px;
}
.modal{
  width:100%;max-width:480px;max-height:88vh;overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:0;padding:24px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.modal .panel-head{margin-bottom:10px}
.modal .x{background:none;border:0;color:var(--muted);font-size:24px;line-height:1;cursor:pointer}
.modal .x:hover{color:var(--head)}
.modal input[type=password]{
  width:100%;padding:10px 12px;border-radius:0;font-family:inherit;font-size:14px;
  background:var(--panel-3);border:1px solid var(--line-soft);color:var(--head);outline:none;
}
.modal input[type=password]:focus{border-color:var(--tint-40)}
.livestamp{font-size:12px;color:var(--muted)}

/* ---------- chart hover ---------- */
.chartwrap{position:relative}
.chartwrap svg{display:block}
.xhair{
  position:absolute;top:10px;bottom:26px;width:1px;display:none;pointer-events:none;
  background:var(--muted);
}
.chart-tip{
  position:absolute;display:none;pointer-events:none;z-index:5;white-space:nowrap;
  background:var(--panel);border:1px solid var(--line);border-radius:0;
  padding:8px 11px;font-size:12px;box-shadow:0 6px 20px rgba(0,0,0,.18);
}
.chart-tip > b{display:block;color:var(--muted);font-weight:600;font-size:11px;
  letter-spacing:.04em;text-transform:uppercase;margin-bottom:5px}
.chart-tip span{display:flex;align-items:center;gap:8px;color:var(--text-2);line-height:1.75}
.chart-tip i{width:11px;height:3px;border-radius:2px;display:inline-block;flex:0 0 auto}

/* ---------- measure: click one point, click another ---------- */
.mark{
  position:absolute;top:10px;bottom:26px;width:1px;display:none;pointer-events:none;z-index:4;
  background:var(--blue);
}
.mark:before{                       /* the dot sits on the marked session */
  content:"";position:absolute;left:50%;width:9px;height:9px;margin-left:-4.5px;
  border-radius:50%;background:var(--blue);
  border:2px solid var(--panel-2);box-sizing:content-box;
}
.mark.a:before{top:var(--mark-y, 50%);margin-top:-4.5px}
.mark.b:before{top:var(--mark-y, 50%);margin-top:-4.5px}
/* the stretch between the two marks */
.markband{
  position:absolute;top:10px;bottom:26px;display:none;pointer-events:none;z-index:3;
  background:var(--tint-10);border-inline:1px solid var(--tint-40);
}
.markbox{
  position:absolute;display:none;z-index:6;white-space:nowrap;
  background:var(--panel);border:1px solid var(--line);border-radius:0;
  padding:9px 12px;font-size:12px;box-shadow:0 6px 20px rgba(0,0,0,.18);
}
.markbox b{color:var(--head);font-weight:600;font-size:15px}
.markbox .row{display:flex;gap:8px;align-items:baseline;color:var(--text-2);line-height:1.7}
.markbox .hint{color:var(--muted);font-size:11px;margin-top:4px}
.markbox .clear{
  background:none;border:0;color:var(--muted);cursor:pointer;font-family:inherit;
  font-size:11px;padding:0;text-decoration:underline;
}
.markbox .clear:hover{color:var(--head)}

/* ---------- moving-average toggles ---------- */
.ma-row{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.machip{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  padding:5px 12px;border-radius:0;font-family:inherit;font-size:12.5px;font-weight:600;
  background:var(--panel-3);border:1px solid var(--line-soft);color:var(--muted);
}
.machip:hover{color:var(--head);border-color:var(--tint-40)}
.machip i{width:14px;height:3px;border-radius:2px;display:inline-block;opacity:.35}
.machip.on{color:var(--head);background:var(--tint-10);border-color:var(--tint-20)}
.machip.on i{opacity:1}
.machip[disabled]{opacity:.4;cursor:not-allowed}
/* an overlay drawn on modelled open/high/low rather than reported candles */
.machip.est.on{border-style:dashed}
.ma-group{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ma-group + .ma-group{padding-inline-start:14px;margin-inline-start:6px;
  border-inline-start:1px solid var(--line-soft)}
.ma-glabel{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin-inline-end:2px}

/* ---------- indicator reading panes ---------- */
.studypane{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft)}
.studypane h3{font-size:15px}

/* ---------- revenue vs earnings ---------- */
.seg{display:inline-flex;background:var(--panel-3);border:1px solid var(--line-soft);
  border-radius:0;padding:3px;gap:2px}
.seg button{
  background:none;border:0;border-radius:0;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:600;color:var(--muted);padding:6px 14px;white-space:nowrap;
}
.seg button:hover:not(:disabled):not(.on){color:var(--head)}
.seg button.on{background:var(--grad);color:#fff}
.seg button:disabled{opacity:.45;cursor:not-allowed}

.revkey{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 16px;font-size:12.5px;
  color:var(--muted)}
.revper{font-weight:800;color:var(--head);font-size:13px}
.revk{display:inline-flex;align-items:center;gap:8px}
.revk b{color:var(--head);font-weight:700}
.revk i{width:11px;height:11px;border-radius:3px;display:inline-block;flex:0 0 auto}
.revk i.line{height:3px;border-radius:2px}
.combo-hit{cursor:crosshair}

/* ---------- market strip ---------- */
.mstrip{
  position:relative;
  display:flex;align-items:stretch;gap:0;margin-bottom:24px;overflow:hidden;
  /* The same surface as .panel, not --panel-4. On white those differ, and a
     tinted bar in a page of white cards reads as a mistake rather than as
     emphasis. */
  background:var(--panel-2);border:1px solid var(--line-soft);border-radius:0;
}
/* A half-shown cell at the edge just looks like one someone forgot to
   fill, so the overflow fades out. The fade is tied to the scroll
   position rather than painted on for ever: it appears on the side that
   has more to show and goes when there is nothing left that way, which
   makes it an indicator and not just decoration. */
.mstrip-items.more-end ~ .mfade-end,
.mstrip-items.more-start ~ .mfade-start{opacity:1}
.mfade{
  position:absolute;top:1px;bottom:1px;width:46px;z-index:1;
  pointer-events:none;opacity:0;transition:opacity .18s ease;
}
.mfade-end{right:1px;background:linear-gradient(to right, transparent, var(--panel-2))}
.mfade-start{left:1px;background:linear-gradient(to left, transparent, var(--panel-2))}
.mstrip-label{
  display:flex;align-items:center;gap:8px;padding:12px 16px;flex:0 0 auto;
  font-size:12.5px;font-weight:700;color:var(--text-2);white-space:nowrap;
  border-inline-end:1px solid var(--line-soft);
}
.mstrip-label .t-sub{font-weight:500;margin-inline-start:2px}
.mdot{width:8px;height:8px;border-radius:50%;background:var(--blue);
  animation:gnzubPulse 2.4s infinite}
/* Scrolls rather than wraps: a strip that reflows onto three rows stops
   being a strip and starts being a table nobody asked for. */
.mstrip-items{
  display:flex;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;
  -ms-overflow-style:none;
}
.mstrip-items::-webkit-scrollbar{display:none}

/* ---- the ticker ----

   Two identical runs side by side. The track slides exactly one run's
   width and starts over, by which point the second run is sitting where
   the first began — so the loop has no seam and no jump back.

   The animation is on a transform, which the compositor handles without
   touching layout; animating scrollLeft instead would have the main
   thread doing this work sixty times a second for as long as the page is
   open. */
.mstrip-items.ticking{overflow:hidden}
.mticker{display:flex;flex:0 0 auto;min-width:100%;will-change:transform}
.mrun{display:flex;flex:0 0 auto}
.mstrip-items.ticking .mticker{
  animation:gnzubTicker var(--ticker-duration, 40s) linear infinite;
}
@keyframes gnzubTicker{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(var(--ticker-travel,-50%),0,0)}
}
/* Stop while it is being read, or while nobody is looking. Hovering a
   moving list to look at one figure and having it keep going is the
   single most annoying thing a ticker can do. */
.mstrip:hover .mstrip-items.ticking .mticker,
.mstrip-items.ticking:focus-within .mticker,
.mstrip-items.ticking.paused .mticker{animation-play-state:paused}

/* A reader who has asked for less movement gets a strip that sits still
   and scrolls by hand, which is what it did before it ticked. */
@media (prefers-reduced-motion: reduce){
  .mstrip-items.ticking{overflow-x:auto}
  .mstrip-items.ticking .mticker{animation:none}
}

/* While it ticks there is always more either side, so both edges fade. */
.mstrip-items.ticking ~ .mfade{opacity:1}
/* One column since the sparkline went: the cell is as wide as its widest
   number and no wider, which is what lets a dozen markets sit in the space
   six used to need. */
.mitem{
  display:flex;flex-direction:column;justify-content:center;gap:1px;
  padding:10px 18px;flex:0 0 auto;
  border-inline-end:1px solid var(--line-soft);
}
.mitem:last-child{border-inline-end:0}
.mname{font-size:11.5px;font-weight:700;color:var(--muted);
  letter-spacing:.03em;white-space:nowrap}
.mval{font-size:15px;font-weight:700;color:var(--head);white-space:nowrap}
.mchg{font-size:11.5px;font-weight:600;white-space:nowrap}

/* ---------- news sentiment ---------- */
.sentbar{display:flex;height:8px;border-radius:0;overflow:hidden;margin:18px 0 10px;
  background:rgba(148,163,184,.14)}
.sentbar i{display:block;height:100%}
.sentkey{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.sentkey span{display:flex;align-items:center;gap:6px}
.sentkey i{width:9px;height:9px;border-radius:50%;display:inline-block}

.newslist{display:flex;flex-direction:column}
.newsrow{display:flex;align-items:flex-start;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--line-soft)}
.newsrow:last-child{border-bottom:0}
.newsdot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;margin-top:6px;cursor:help}
.newsbody{flex:1;min-width:0}
.newsbody a,.newsbody span{color:var(--text-2);font-size:14px;font-weight:500;line-height:1.45}
.newsbody a:hover{color:var(--head)}
.newsrow .tag{flex:0 0 auto;font-variant-numeric:tabular-nums}

/* ---------- fear & greed ---------- */
.fgi-wrap{display:grid;grid-template-columns:280px 1fr;gap:24px;align-items:center}
.fgi-parts{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
.fgi-part .fgi-row{display:flex;justify-content:space-between;align-items:baseline;
  font-size:13px;color:var(--text-2);margin-bottom:6px}
.fgi-part .bar{margin-bottom:5px}
.fgi-part .t-sub{line-height:1.4}

/* ---------- account + paywall ---------- */
.wrap-narrow{max-width:940px}
.accountbtn{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:7px 13px;border-radius:0;font-size:12.5px;font-weight:600;
  background:var(--panel-3);border:1px solid var(--line-soft);color:var(--text-2);
}
.accountbtn:hover{text-decoration:none;border-color:var(--tint-40);color:var(--head)}
.accountdot{width:8px;height:8px;border-radius:50%;display:inline-block;background:#5A6694}
.accountdot.pro{background:var(--green)}
.accountdot.trial{background:var(--amber)}
.accountname{max-width:110px;overflow:hidden;text-overflow:ellipsis}
.accountplan{
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:800;
  padding:2px 7px;border-radius:0;background:var(--tint-10);color:var(--blue);
}

/* The gate blurs rather than deletes: the page underneath is plainly there,
   which is the honest picture of a paywall drawn in the browser. */
body.gated main.page{filter:blur(7px);pointer-events:none;user-select:none}
body.gated{overflow:hidden}
.gate{
  position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(6,11,26,.74);backdrop-filter:blur(2px);
}
.gate-card{
  width:100%;max-width:520px;text-align:center;
  background:var(--panel);border:1px solid var(--line);border-radius:0;padding:34px 30px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.gate-card h2{margin:14px 0 10px;font-size:25px}
.gate-card .lead{color:var(--muted);font-size:14.5px;margin:0 auto;max-width:420px}
.gate-badge{
  display:inline-block;padding:5px 14px;border-radius:0;font-size:12px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;background:var(--grad);color:#fff;
}
.gate-price{margin:22px 0 4px;font-size:30px;font-weight:600;letter-spacing:-.025em;color:var(--head)}
.gate-price span{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-top:4px}
.gate-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}

.formmsg{min-height:20px;margin:-4px 0 12px;line-height:1.5}

.claimbox{margin-top:16px;border-top:1px solid var(--line-soft);padding-top:14px}
.claimbox summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--text-2);
  list-style:none;display:flex;align-items:center;gap:8px}
.claimbox summary::-webkit-details-marker{display:none}
.claimbox summary:before{content:"+";color:var(--blue);font-weight:800}
.claimbox[open] summary:before{content:"\2212"}
.claimbox summary:hover{color:var(--head)}
.claimbox p{margin:10px 0}

code{background:var(--panel-3);border:1px solid var(--line-soft);border-radius:0;
  padding:1px 6px;font-size:13px;color:var(--blue)}
pre.code{background:var(--panel-4);border:1px solid var(--line-soft);border-radius:0;
  padding:14px 16px;overflow:auto;font-size:13px;color:#BFD3FF;margin:0 0 16px}
pre.code code{background:none;border:0;padding:0}

@media(max-width:980px){
  h1{font-size:38px}h2{font-size:27px}
  .hero-grid,.feature,.grid-2{grid-template-columns:minmax(0,1fr);gap:32px}
  .feature.flip .fcopy{order:0}
  .cols-3,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  /* keep the sections reachable on a phone: scroll the links, drop the CTA */
  .nav-links{gap:12px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-cta .btn{display:none}
  /* Two rows on a phone: logo, links and controls keep the top one, and the
     search takes the second. There is no room for a usable field beside
     eight links at 375px, and no page-level box to fall back on any more.

     The links need flex-basis 0, not auto. On `auto` they ask for their
     full content width, which in a wrapping row means every child claims a
     line of its own — four rows in a bar sized for two, and the logo
     pushed out of the top of it. */
  .nav-in{flex-wrap:wrap;align-content:center;row-gap:8px}
  .logo{order:1;flex:0 0 auto}
  .nav-links{order:2;flex:1 1 0;min-width:0}
  .nav-cta{order:3;flex:0 0 auto}
  .navsearch{order:4;flex:1 1 100%;max-width:none;min-width:0;margin-inline-start:0}
  :root{--nav-h:108px}
  .livepill{padding:6px 10px}
  .ma-group + .ma-group{padding-inline-start:0;margin-inline-start:0;border-inline-start:0}
  .accountname{display:none}
  .mstrip-label{padding:10px 12px}
  .mitem{padding:9px 14px}
  .fgi-wrap{grid-template-columns:minmax(0,1fr);gap:16px}
  .fgi-parts{grid-template-columns:minmax(0,1fr)}
}

/* ---------- phones ----------
   The ≤980 block above is for tablets and narrow windows. A phone needs the
   rows that sit side by side on a desktop to stack instead: left to shrink,
   a five-button range row or a ticker-beside-price header forces the whole
   page wider than the screen, and then everything scrolls sideways. */
@media(max-width:700px){
  .wrap{padding:0 16px}
  h1{font-size:32px}h2{font-size:24px}
  .panel{padding:18px;border-radius:0}

  /* a panel head is a title beside its controls; here the controls drop to
     their own line rather than squeezing the title away */
  .panel-head{flex-wrap:wrap;row-gap:8px}
  .panel-head > *{min-width:0}

  .btn.sm{padding:7px 12px;font-size:13px}
  #rangeBtns{flex-wrap:wrap}

  /* stock header: price under the ticker, not beside it */
  #head .stock-head{flex-wrap:wrap;gap:12px}
  #head .quote{margin-inline-start:0;width:100%}

  .page-head{gap:12px}
  .stats{gap:20px}

  /* The next-earnings strip wraps onto a line per item at this width, which
     turned a one-line summary into a quarter of the screen. The nav already
     carries a Calendar link, so the button goes and the rest tightens up. */
  /* The zoom group wraps onto its own line here, where a leading divider
     would read as a stray rule rather than a separator. */
  .zoomgroup{border-inline-start:0;padding-inline-start:0;margin-inline-start:0}

  #earningsNext .btn{display:none}
  #earningsNext .panel{padding:12px 14px}
  #earningsNext .panel > div{gap:8px 12px}

  /* The strip's label sat on one line and took half the row, leaving a window
     too narrow for even one item. Wrapping the date underneath keeps the
     as-of date on screen and gives the items back their room. */
  /* The nav links are the primary navigation on a phone, and seven of them
     were sharing 85px because the feed pill's label took the rest. The dot
     still carries the state, and the pill keeps its tooltip and its tap
     target — only the word goes. */
  .livepill span{display:none}
  .livepill{padding:8px 10px;gap:0}

  .mstrip-label{flex-wrap:wrap;gap:0 7px;padding:9px 11px;line-height:1.35;
    max-width:112px;white-space:normal}
  .mstrip-label .t-sub{flex-basis:100%;margin-inline-start:0}
  .mitem{padding:9px 12px}
}

/* ---------- chart zoom ---------- */
.zoomgroup{
  display:inline-flex;gap:6px;align-items:center;
  padding-inline-start:8px;margin-inline-start:2px;
  border-inline-start:1px solid var(--line-soft);
}
.zoombtn{min-width:30px;padding-inline:9px}

/* ---------- right-to-left ----------
   Nearly all of the layout flips on its own: the rules above use logical
   properties, so margins, padding, borders and text alignment follow the
   document's direction without a parallel set of RTL overrides. What is
   left is the handful of things that are NOT mirror images. */

/* A price, a percentage or a date is read left-to-right in Arabic too.
   Without isolation the browser reorders "$1,234.56" and "-20.2%" against
   the surrounding Arabic, moving the sign or the symbol to the wrong end. */
[dir="rtl"] .mono,
[dir="rtl"] .num,
[dir="rtl"] .kpi .v,
[dir="rtl"] .livestamp,
[dir="rtl"] .quote .mono{ direction:ltr; unicode-bidi:isolate }
[dir="rtl"] td.num,[dir="rtl"] th.num{ unicode-bidi:isolate }

/* A chart's x-axis is time, and time does not mirror: a price history that
   ran right-to-left would read as though the stock moved the other way.
   The charts stay left-to-right in both directions, which is what every
   Arabic financial publication does with them. */
[dir="rtl"] #priceChart, [dir="rtl"] #studyPanes,
[dir="rtl"] #equity, [dir="rtl"] #hist, [dir="rtl"] #ratings,
[dir="rtl"] svg{ direction:ltr }

/* The fades are placed by physical side, so in RTL they swap: the end
   the items run off is the left one. */
/* In RTL the run lays out right to left, so later markets sit to the
   left of earlier ones and the track has to travel the other way to
   bring them in. */
[dir="rtl"] .mticker{--ticker-travel:50%}

[dir="rtl"] .mfade-end{right:auto;left:1px;
  background:linear-gradient(to left, transparent, var(--panel-2))}
[dir="rtl"] .mfade-start{left:auto;right:1px;
  background:linear-gradient(to right, transparent, var(--panel-2))}

/* An arrow in a label points the way the reader is going. */
[dir="rtl"] .rtl-flip{ display:inline-block;transform:scaleX(-1) }

/* Tajawal for the Arabic version. Poppins has no Arabic glyphs, so without
   a face of its own the Arabic falls back to whatever the system happens to
   have — which is what the default Windows and Android faces look like, and
   not what the rest of the page looks like. The stylesheet is only fetched
   once somebody switches, from i18n.js. */
[dir="rtl"] body{
  font-family:Tajawal,Inter,"Segoe UI",system-ui,-apple-system,sans-serif;
}

/* ---- Shariah screen badge ----------------------------------------------
   Three states on purpose: green only where both AAOIFI screens ran and
   passed, red where one failed, grey where the data cannot decide. Colour
   comes from the class and the crescent fills with currentColor, so dark
   and light both work from one definition. */
.halal{display:inline-flex;align-items:center;gap:5px;vertical-align:-2px;line-height:1}
.halal-pass{color:var(--green)}
.halal-fail{color:var(--red)}
.halal-review{color:var(--muted)}
.halal .hl-t{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}

/* The screener's pager. Buttons, not links: there is no new page to
   navigate to and nothing above the table should move. */
.pager{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:14px 0 2px;border-top:1px solid var(--line-soft);margin-top:4px}
.pager button{width:auto;padding:7px 14px;font-size:13.5px}
.pager button[disabled]{opacity:.42;cursor:default}
.pager .pg-count{font-size:13px;color:var(--muted);margin-inline-start:auto}
/* Under the company name, so it wraps as prose rather than stretching
   across the quote block. */
.halal-note{max-width:58ch;margin-top:8px}