/**
 * Public site shell, aligned to the PMS design system.
 * Tokens live in variables.css. This file only applies those rules
 * to the marketing chrome (bar, hero, fields, motion, scrollbars).
 */

html,
body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  letter-spacing: var(--tracking-body);
  line-height: var(--leading-body);
  font-optical-sizing: auto;
}

h1, h2, h3, .section-title, .page-title {
  letter-spacing: var(--tracking-title);
  line-height: var(--leading-title);
  font-weight: 700;
  color: var(--ink-strong);
}

:lang(ur),
[lang="ur"],
[dir="rtl"] {
  letter-spacing: 0;
  line-height: 1.85;
}

.mesh-bg {
  display: none;
}

/* The header and footer used to be painted here, in light surfaces. They are
   the site's dark chrome now and belong to layout/shell.css, which owns them
   end to end. Leaving the rules here only meant this file quietly won — it
   loads last — and the bar came out white with white text on it. */

html body .hero-slide {
  background-image: none !important;
  background-color: var(--canvas);
}

html body .hero-overlay {
  background: radial-gradient(ellipse at 78% 42%, rgba(243, 91, 37, 0.18), transparent 58%);
}

html body .hero-slide-heading {
  color: var(--ink-strong);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  font-weight: 700;
}

html body .hero-slide-sub {
  color: var(--ink-soft);
}

html body .hero-search-chips a {
  background: var(--sand);
  color: var(--ink-strong);
  border-color: var(--border-hairline);
}

html body .hero-search-chips a:hover {
  background: var(--sand-strong);
  color: var(--ink-strong);
  border-color: var(--border-strong);
}

html body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="hidden"]),
html body select,
html body textarea {
  border-radius: var(--r-control);
  background: var(--surface-soft);
  border: 1px solid var(--border-hairline);
  color: var(--ink);
  font-family: var(--font);
  letter-spacing: var(--tracking-body);
}

html body textarea {
  border-radius: var(--r-field);
}

html body .hero-search-form input,
html body .home-domain-form input {
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

html body input:focus,
html body select:focus,
html body textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  background: var(--surface);
}

html body .btn:active,
html body button.chip:active,
html body .header-icon-btn:active,
html body .theme-toggle-btn:active {
  transform: scale(0.97);
  transition-duration: var(--dur-press);
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--ink-strong) 22%, transparent);
  border: 3.5px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}
::-webkit-scrollbar-button {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  html body .btn:active,
  html body button.chip:active {
    transform: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  body > header {
    background: var(--surface);
    backdrop-filter: none;
  }
}