:root {
  --tsf-white: #ffffff;
  --tsf-graphite: #1d1d1f;
  --tsf-stone: #86868b;
  --tsf-border: #e5e5e7;
  --tsf-sky: #e2670c;
  --tsf-space-sm: 8px;
  --tsf-space-md: 16px;
  --tsf-space-lg: 24px;
  --tsf-space-2xl: 48px;
  --tsf-space-3xl: 64px;
  --tsf-h1: 2.25rem;
  --tsf-h2: 1.75rem;
  --tsf-h4: 1.125rem;
  --tsf-small: .875rem;
}
* { box-sizing: border-box; }
html { color-scheme: light; background: var(--tsf-white); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--tsf-space-2xl) var(--tsf-space-lg);
  color: var(--tsf-graphite);
  font-family: Outfit, sans-serif;
  -webkit-font-smoothing: antialiased;
}
main { width: min(100%,50rem); text-align: center; }
.brand img { display: block; margin: 0 auto var(--tsf-space-md); }
.wordmark { margin: 0; font-size: var(--tsf-h1); font-weight: 600; letter-spacing: -.04em; line-height: 1.15; }
.tagline { margin: var(--tsf-space-sm) 0 0; color: var(--tsf-sky); font-size: var(--tsf-small); font-weight: 500; }
.rule { width: var(--tsf-space-2xl); height: 1px; background: var(--tsf-border); margin: var(--tsf-space-2xl) auto; }
h1 { margin: 0; font-size: clamp(1.375rem,4.5vw,var(--tsf-h1)); font-weight: 400; line-height: 1.35; letter-spacing: -.035em; text-wrap: balance; }
.arabic { margin: var(--tsf-space-md) 0 0; font-family: 'Noto Sans Arabic',sans-serif; font-size: clamp(var(--tsf-h4),3.5vw,var(--tsf-h2)); font-weight: 400; line-height: 1.8; }
@media (max-height: 500px) {
  body { padding-block: var(--tsf-space-lg); }
  .rule { margin-block: var(--tsf-space-lg); }
}