@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/public-site/fonts/space-grotesk-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/public-site/fonts/space-grotesk-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/public-site/fonts/space-grotesk-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/public-site/fonts/space-grotesk-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/public-site/fonts/jetbrains-mono-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/public-site/fonts/jetbrains-mono-latin-500.woff2") format("woff2");
}

:root {
  display: block;
  --ps-deep: #0b0d13;
  --ps-deep-mid: #12151b;
  --ps-link: #fda43a;
  --ps-accent: #fda43a;
  --ps-accent-hover: #e08e28;
  --ps-highlight: #44d4e2;
  --ps-ink: #eceff1;
  --ps-muted: #8e939a;
  --ps-line: #2a2e36;
  --ps-bg: #0b0d13;
  --ps-card: #12151b;
  --ps-hero-from: #0b0d13;
  --ps-hero-to: #12151b;
  --ps-header-h: 64px;
  --ps-radius: 4px;
  --ps-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fc-font: "Space Grotesk", system-ui, sans-serif;
  --fc-display: "Space Grotesk", system-ui, sans-serif;
  font-family: var(--fc-font);
  color: var(--ps-ink);
  background: var(--ps-bg);
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[data-ps-look="classic"] {
  --ps-deep: #0b1f3a;
  --ps-deep-mid: #123a6b;
  --ps-link: #3c4da7;
  --ps-accent: #e77207;
  --ps-accent-hover: #d45f0c;
  --ps-highlight: #3c4da7;
  --ps-ink: #0f172a;
  --ps-muted: #64748b;
  --ps-line: #e2e8f0;
  --ps-bg: #ffffff;
  --ps-card: #ffffff;
  --ps-hero-from: #0b1f3a;
  --ps-hero-to: #1a4a7a;
  --ps-header-h: 80px;
  --ps-radius: 4px;
  --fc-radius: 4px;
  --fc-chip-bg: #f0f1f4;
  --fc-chip-text: #2c2f36;
  --fc-badge-bg: #eef1fd;
  --fc-badge-text: #3c4da7;
  --fc-bg-muted: #f3f4f6;
  --ps-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fc-font: Krub, system-ui, sans-serif;
  --fc-display: Krub, system-ui, sans-serif;
  color-scheme: light;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

html[data-ps-look="classic"] .ps-btn--start,
html[data-ps-look="classic"] .ps-btn--login {
  border-radius: 999px;
}

.ps-shell {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ps-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--ps-bg) 80%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ps-line);
  box-shadow: none;
}

/* Match openlegacy.com ._container--fluid + .header (min-height 80px, 40px side inset). */
.ps-header__inner {
  width: calc(100% - 80px);
  max-width: none;
  margin-inline: auto;
  padding: 0;
  min-height: var(--ps-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

/* .header__logo { width: 168px } — img is 412×97 → ~39.6px tall at this width. */
.ps-logo {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  line-height: 0;
  width: 132px;
}

.ps-logo img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 132px;
}

.ps-logo--footer {
  width: 132px;
}

.ps-logo--footer img {
  width: 100%;
  height: auto;
  max-width: 132px;
}

.ps-toggler {
  margin-left: auto;
  align-self: center;
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  border: 1px solid var(--ps-line);
  border-radius: 8px;
  background: var(--ps-card);
  cursor: pointer;
  padding: 0;
}

.ps-toggler span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: var(--ps-ink);
  border-radius: 1px;
}

.ps-header__right {
  display: flex;
  align-items: stretch;
  gap: 1.75rem;
  flex: 1;
  justify-content: flex-end;
  min-width: 0;
}

.ps-nav {
  display: flex;
  align-items: stretch;
  margin-right: 60px;
}

.ps-nav__list {
  display: flex;
  align-items: stretch;
  gap: 0 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ps-nav__item {
  position: relative;
  display: flex;
  align-items: stretch;
}

.ps-nav__trigger {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ps-muted);
  font: inherit;
  font-weight: 500;
  font-size: 14px;
  padding-block: 18px;
  padding-inline: 0.15rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.ps-nav__trigger:hover,
.ps-nav__item:hover > .ps-nav__trigger,
.ps-nav__item--open > .ps-nav__trigger {
  color: var(--ps-ink);
  background: transparent;
}

.ps-nav__item--open > .ps-nav__trigger {
  color: var(--ps-highlight, var(--ps-accent));
}

/* The nav is centred in the header row, so the item box ends a few pixels above
   the panel: that dead band is where the pointer loses :hover and the panel shuts
   mid-move. The transparent top border is a hover bridge spanning the panel's full
   width — it covers the band for a straight drop and for a diagonal one — and
   background-clip keeps the card itself where it looks flush. */
.ps-mega {
  --ps-mega-bridge: 0.5rem;
  display: none;
  position: absolute;
  top: calc(100% - var(--ps-mega-bridge));
  left: 0;
  right: auto;
  /* A plain section is one link column: hug the list instead of forcing a mega width. */
  width: max-content;
  min-width: 15rem;
  max-width: min(30rem, calc(100dvw - 3rem));
  background: var(--ps-card);
  background-clip: padding-box;
  border: 1px solid var(--ps-line);
  border-top: var(--ps-mega-bridge) solid transparent;
  border-radius: 0 0 var(--ps-radius) var(--ps-radius);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  padding: 0;
  z-index: 50;
  overflow: hidden;
}

/* Only the leftmost section opens rightward; every other panel hangs from its
   trigger's right edge, so it can never push past the viewport. */
.ps-nav__item:not(:first-child) > .ps-mega:not(.ps-mega--promo) {
  left: auto;
  right: 0;
}

/* Promo sections are the wide mega panels. The header's backdrop-filter is the
   containing block, so insets are against the bar itself. The panel hangs from
   the bar's bottom and pins to the header content's right gutter (the same
   2.5rem inset as `.ps-header__inner`), which keeps it under the nav on a wide page. */
.ps-mega--promo {
  position: fixed;
  top: calc(var(--ps-header-h) - var(--ps-mega-bridge));
  left: auto;
  right: 2.5rem;
  width: min(68.75rem, calc(100% - 5rem));
  min-width: 0;
  max-width: none;
  transform: none;
}

.ps-nav__item:hover > .ps-mega,
.ps-nav__item--open > .ps-mega {
  display: block;
}

.ps-mega__body {
  display: flex;
  align-items: stretch;
}

/* The tall panel is the promo one; a plain link column sizes to its content. */
.ps-mega--promo .ps-mega__body {
  min-height: 280px;
}

.ps-mega__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.75rem 3rem;
  flex: 1;
  padding: 1.5rem 1.75rem;
}

.ps-mega--promo .ps-mega__grid {
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  padding: 2.5rem 2.75rem;
}

.ps-mega:not(.ps-mega--promo) .ps-mega__col ul {
  gap: 0.75rem;
}

.ps-mega__title,
.ps-footer__title {
  margin: 0 0 1.15rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ps-muted);
}

.ps-mega__promo {
  width: min(320px, 34%);
  flex-shrink: 0;
  background: var(--ps-deep-mid);
  padding: 2.5rem 1.85rem;
  display: flex;
  align-items: flex-start;
  align-self: stretch;
}

.ps-mega__promo-copy {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.ps-mega__promo-stat {
  margin: 0 0 0.15rem;
  font-family: var(--fc-display, inherit);
  font-size: 3.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ps-highlight, var(--ps-accent));
  letter-spacing: -0.02em;
}

.ps-mega__promo-title {
  margin: 0 0 1rem;
  font-family: var(--fc-display, inherit);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ps-ink);
  line-height: 1.3;
}

.ps-mega__promo-stat + .ps-mega__promo-title {
  margin-top: 0.15rem;
}

.ps-mega__promo-body {
  margin: 0 0 1.35rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ps-muted);
}

.ps-mega__promo-cta {
  color: var(--ps-link);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  margin-top: auto;
}

.ps-mega__promo-cta:hover,
.ps-mega__promo-cta:focus-visible {
  color: var(--ps-ink);
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

.ps-mega__promo-cta::after {
  content: ' →';
}

.ps-footer__subtitle {
  margin: 0.85rem 0 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ps-deep);
}

.ps-mega__col ul,
.ps-footer__cell ul,
.ps-footer__legal,
.ps-footer__social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.ps-mega__col a {
  display: block;
  padding: 0;
  color: var(--ps-link);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  transition: color 0.15s ease;
}

/* --ps-link and --ps-accent are the same orange in the default look, so hovering
   to --ps-accent was a no-op: the row needs its own treatment to read as live. */
.ps-mega__col a:focus-visible {
  color: var(--ps-ink);
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

@media (hover: hover) and (pointer: fine) {
  .ps-mega__col a:hover {
    color: var(--ps-ink);
    text-decoration: underline;
    text-underline-offset: 0.25rem;
  }
}

.ps-footer__cell a {
  display: block;
  padding: 0;
  color: var(--ps-ink);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.35;
}

.ps-footer__cell a:hover,
.ps-footer__legal a:hover,
.ps-footer__social a:hover {
  color: var(--ps-accent);
}

.ps-header__ctas,
.ps-footer__ctas {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
  align-self: center;
}

.ps-lang {
  box-sizing: border-box;
  flex: 0 0 auto;
  align-self: center;
  width: auto;
  min-width: 0;
  max-width: 7.5rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  padding-inline: 0.5rem 1.35rem;
  border: 1px solid var(--ps-line);
  border-radius: 0.375rem;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238e939a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.4rem center;
  background-size: 0.65rem 0.45rem;
  color: var(--ps-ink);
  /* Native popup list: dark, so options read as light ink on black. */
  color-scheme: dark;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: calc(2rem - 2px);
  appearance: none;
  -webkit-appearance: none;
}

html[dir="rtl"] .ps-lang {
  background-position: left 0.4rem center;
}

.ps-lang option {
  color: #ffffff;
  background-color: #000000;
}

/* Match openlegacy.com .header__search */
.ps-search {
  position: relative;
  border-right: 1px solid var(--ps-line);
  margin-right: 14px;
  padding-right: 14px;
  display: flex;
  align-items: center;
}

.ps-search__toggler {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 50%;
  padding: 0;
  /* Pad the hit area to the 44px touch floor, as the Angular copy of this header
     already does; the icon keeps its 16px box. The room is also what makes the
     hover chip below readable. */
  min-width: 44px;
  min-height: 44px;
  line-height: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* It had no hover feedback at all. The glyph is an <img> with a baked-in grey,
     so it cannot follow .ps-nav__trigger's muted -> ink shift: fade it up and add
     a chip mixed from --ps-ink, which reads on both the dark and classic looks. */
  opacity: 0.72;
  transition:
    opacity 0.15s ease,
    background-color 0.15s ease;
}

.ps-search__toggler:hover,
.ps-search__toggler:focus-visible {
  opacity: 1;
  background-color: color-mix(in srgb, var(--ps-ink) 12%, transparent);
}

.ps-search__toggler img {
  display: block;
  width: 16px;
  height: 16px;
}

.ps-search__dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 300px;
  background: var(--ps-card);
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-radius);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
  padding: 10px;
  z-index: 60;
}

.ps-search--open .ps-search__dropdown {
  display: block;
}

.ps-search__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ps-search__input {
  display: block;
  width: 100%;
  max-width: none;
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-radius);
  color: var(--ps-ink);
  background: var(--ps-deep-mid);
  font-size: 16px;
  padding: 10px;
  font-family: inherit;
  outline: none;
}

.ps-search__input:hover,
.ps-search__input:focus {
  border-color: var(--ps-ink);
}

.ps-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.2rem;
  border-radius: var(--ps-radius);
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
  font-family: inherit;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.ps-btn--start {
  background: var(--ps-accent);
  color: #180f09;
  border: 0;
  border-radius: var(--ps-radius);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.55rem 0.9rem;
  box-shadow: none;
}

.ps-btn--start:hover {
  background: var(--ps-accent-hover);
  box-shadow: none;
}

.ps-btn--primary {
  background: var(--ps-accent);
  color: #180f09;
  border: 1px solid var(--ps-accent);
}

.ps-btn--primary:hover {
  background: var(--ps-accent-hover);
  border-color: var(--ps-accent-hover);
}

.ps-btn--ghost {
  background: transparent;
  color: var(--ps-ink);
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-radius);
}

.ps-btn--ghost:hover {
  border-color: var(--ps-ink);
  background: var(--ps-card);
}

.ps-main {
  flex: 1 0 auto;
  display: block;
  width: 100%;
  /* Keep footer below the fold until the user scrolls past page content. */
  min-height: calc(100dvh - var(--ps-header-h));
}

@supports (height: 100cqh) {
  .ps-main {
    min-height: calc(100cqh - var(--ps-header-h));
  }
}

.ps-footer {
  background: var(--ps-bg);
  color: var(--ps-muted);
  flex-shrink: 0;
  width: 100%;
}

.ps-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 1.5rem;
}

.ps-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--ps-line);
}

.ps-footer .ps-btn--ghost {
  background: transparent;
  color: var(--ps-ink);
  border-color: var(--ps-line);
  border-radius: var(--ps-radius);
}

.ps-footer .ps-btn--ghost:hover {
  color: var(--ps-ink);
  border-color: var(--ps-ink);
  background: var(--ps-card);
}

.ps-footer__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.5rem;
  padding: 2rem 0 1.75rem;
}

.ps-footer__cell a {
  color: var(--ps-muted);
  font-size: 0.875rem;
}

.ps-footer__title {
  font-family: var(--ps-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--ps-muted);
}

.ps-footer__subtitle {
  color: var(--ps-ink);
}

.ps-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ps-line);
  font-size: 0.8125rem;
}

.ps-footer__copy {
  margin: 0;
  color: var(--ps-muted);
}

.ps-footer__legal,
.ps-footer__social {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.ps-footer__legal a,
.ps-footer__social a {
  color: var(--ps-muted);
  text-decoration: none;
}

@media (max-width: 960px) {
  /*
   * Mobile header is taller than the desktop 64px token: 18px pad × 2 plus the logo.
   * Set the real height on .ps-header (not :host — that selector is a no-op in this
   * page stylesheet) so the open menu can fill the rest of the viewport.
   */
  .ps-header {
    --ps-header-h: 100px;
  }

  .ps-toggler {
    display: inline-flex;
  }

  .ps-header__inner {
    box-sizing: border-box;
    width: calc(100% - 40px);
    height: var(--ps-header-h);
    min-height: var(--ps-header-h);
    align-items: center;
    padding-block: 18px;
  }

  .ps-logo {
    width: 132px;
  }

  .ps-logo img {
    width: 100%;
    height: auto;
    max-width: 132px;
  }

  .ps-header__right {
    display: none;
    /* absolute (not fixed): .ps-header's backdrop-filter makes fixed children
       position against the header box, so top/bottom viewport pinning collapses. */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    flex-direction: column;
    align-items: stretch;
    /* flex-end (desktop) would overflow the column upward, where overflow: auto cannot scroll. */
    justify-content: flex-start;
    background: var(--ps-bg);
    border-bottom: 1px solid var(--ps-line);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    /* border-box so padding counts inside max-height (content-box was clipping Start Today). */
    box-sizing: border-box;
    padding: 0.75rem 1.25rem max(1.25rem, env(safe-area-inset-bottom, 0px));
    /* 100% = header height. Prefer svh so mobile URL-bar chrome does not clip the CTAs. */
    max-height: calc(100dvh - 100%);
    max-height: calc(100svh - 100%);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ps-header__right--open {
    display: flex;
  }

  .ps-nav {
    margin-right: 0;
  }

  .ps-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .ps-nav__item {
    display: block;
  }

  .ps-nav__trigger {
    width: 100%;
    text-align: left;
    height: auto;
    padding: 0.85rem 0.25rem;
  }

  .ps-mega {
    position: static;
    display: none;
    width: auto;
    min-width: 0;
    max-width: none;
    transform: none;
    left: auto;
    right: auto;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    overflow: visible;
  }

  .ps-nav__item--open > .ps-mega {
    display: block;
  }

  .ps-nav__item:hover > .ps-mega {
    display: none;
  }

  .ps-nav__item--open:hover > .ps-mega {
    display: block;
  }

  .ps-mega .ps-mega__body {
    flex-direction: column;
    min-height: 0;
  }

  .ps-mega .ps-mega__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0.5rem 0 0.75rem 0.75rem;
  }

  .ps-mega--promo .ps-mega__grid {
    grid-template-columns: 1fr;
  }

  .ps-mega__promo {
    width: auto;
    padding: 1rem 0.75rem;
  }

  .ps-mega .ps-mega__col ul {
    gap: 0.5rem;
  }

  .ps-header__ctas {
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
  }

  .ps-lang {
    order: -2;
    width: 100%;
    max-width: none;
  }

  .ps-search {
    order: -1;
    width: 100%;
    border-right: 0;
    margin-right: 0;
    padding-right: 0;
    flex: 1;
  }

  .ps-search__toggler {
    display: none;
  }

  .ps-search__dropdown {
    display: block !important;
    position: static;
    width: 100%;
    box-shadow: none;
    padding: 0;
    background: transparent;
  }

  .ps-search__input {
    background-color: var(--ps-deep-mid);
    background-image: url('/public-site/search.svg');
    background-position: left 13px center;
    background-repeat: no-repeat;
    background-size: 16px;
    border-color: var(--ps-line);
    border-radius: 6px;
    font-size: 18px;
    font-style: italic;
    font-weight: 400;
    padding-left: 35px;
  }

  .ps-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .ps-footer__grid {
    grid-template-columns: 1fr;
  }
}

.mk-lightbox[hidden] {
  display: none !important;
}

.mk-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.mk-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
}

.mk-lightbox-dialog {
  position: relative;
  z-index: 1;
  max-width: min(1100px, 96vw);
  max-height: 92vh;
  background: #0f172a;
  border-radius: 12px;
  padding: 0.75rem;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}

.mk-lightbox-image {
  display: block;
  max-width: min(1060px, 94vw);
  max-height: calc(92vh - 1.5rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  background: #000;
}

.mk-lightbox-close {
  position: absolute;
  top: 0.35rem;
  right: 0.45rem;
  z-index: 2;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.75);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.mk-lightbox-close:hover {
  background: rgba(15, 23, 42, 0.95);
}

body.mk-lightbox-open {
  overflow: hidden;
}

/*
 * Safari iOS zooms any focused field under 16px and keeps the page zoomed after
 * the keyboard closes. Floor form text on coarse pointers; do not use
 * maximum-scale=1 (that blocks pinch-zoom).
 */
@media (pointer: coarse) {
  input,
  textarea,
  select,
  .ps-search__input {
    font-size: max(16px, 1rem);
  }
}