/* refresh.css — layout and polish overrides for the static pages.
   Loaded after style.css so it wins without editing the template CSS. */

html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* Logo: undo the crisp-edges / translateZ hacks that make a downscaled
   raster look jagged, and let the logo shrink on narrow screens. */
.header-menu .logo img {
  image-rendering: auto !important;
  transform: none !important;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  height: auto !important;
  max-height: 44px;
  width: auto !important;
  max-width: min(300px, 52vw);
  object-fit: contain;
}
.header-menu .header-main { gap: 16px; }
.header-menu .header-main .logo { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; }
.header-menu .right-block { flex: 0 0 auto; }

/* Nav items stay on one line ("How It Works" was wrapping at laptop widths). */
.header-menu .menu-main > ul li > a { white-space: nowrap; }
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .header-menu .menu-main > ul { gap: 0; }
  .header-menu .menu-main > ul li { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 1199.98px) {
  .header-menu .menu-main > ul li { padding-left: 10px; padding-right: 10px; }
}
/* The nav is centred independently of the logo, so on laptop widths a 300px
   logo runs into "How It Works". Keep it clear of the menu. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .header-menu .logo img { max-width: 150px; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .header-menu .logo img { max-width: 220px; }
}

/* Phones: logo + hamburger + compact CTA all fit on one row. */
@media (max-width: 575.98px) {
  .header-menu .logo img { max-height: 32px; max-width: 46vw; }
  .header-menu .menu-humburger { padding-right: 12px !important; }
  .header-menu .right-block .button > span.bg-blue { padding: 10px 14px; font-size: 14px; }
}

/* Mobile drawer icon: keep it modest. */
.menu-mobile-main .heading .logo img { max-height: 40px !important; width: auto; }

/* Pricing cards: crisper edges and a subtle lift on hover. */
.pricing-item { border: 1px solid rgba(255, 255, 255, 0.08); transition: border-color .2s ease, transform .2s ease; }
.pricing-item:hover { border-color: rgba(61, 137, 251, 0.55); transform: translateY(-2px); }
.pricing-item .heading2 { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
@media (prefers-reduced-motion: reduce) { .pricing-item, .pricing-item:hover { transition: none; transform: none; } }

/* Footer: with the duplicate icon gone, keep the social link aligned right. */
.footer-block .heading { justify-content: flex-end; gap: 24px; }
.footer-block .footer-navigate:empty, .footer-block .footer-navigate ul:empty { display: none; }
@media (max-width: 575.98px) {
  .footer-block .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Walkthrough video: fills its column up to 960px, keeps 16:9, centred. */
.walkthrough-video { max-width: 960px; margin: 0 auto; padding: 72px 0 48px; }
.walkthrough-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 16px; background: #000; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
@media (max-width: 767.98px) {
  .walkthrough-video { padding: 32px 0 24px; }
  .walkthrough-video video { border-radius: 10px; }
}