/* Premium Blue guest adapter (after the shared sheet): skip link, flash blocks, newsletter card, auth buttons, captcha slot, blog extras, 404. */

/* ---- skip link: first focusable element, visible only while focused ---------------------------------------------- */
.pb-skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3000;
  padding: 10px 16px;
  border-radius: var(--r-12);
  background: var(--tp-blue);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
}
.pb-skip-link:focus,
.pb-skip-link:focus-visible {
  transform: translateY(0);
  color: #fff;
  outline: 3px solid var(--tp-blue);
  outline-offset: 2px;
}
#main-content:focus { outline: none; }

/* ---- flash and system block: sit below the fixed 84px public header ---------------------------------------------- */
.pb-guest-flash {
  padding-top: 108px;
  max-width: 880px;
}
.pb-guest-flash + .container,
.pb-guest-flash ~ .app-container { margin-top: 16px; }
.pb-guest-flash .alert { margin-bottom: 12px; }
.pb-flash-list { padding-left: 18px; }
.pb-system-block { padding-top: 108px; }
.pb-system-block .pr-doc { margin-top: 0; }
.pb-guest-flash ~ .pb-system-block { padding-top: 0; }

/* the card alerts: spacing inside the auth card */
.auth-form .alert { margin: 0 0 16px; }

/* ---- menu items that are buttons (log out) look like the link items ---------------------------------------------- */
.user-header-menu button.menu-item,
.pb-guest-footer .footer-col button.pb-menu-button {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0;
}

/* ---- footer links on a phone are 44px targets (they were 19px high lines of text; checked 17.10.2026 at 375px) ------ */
@media (max-width: 767.98px) {
  .pb-guest-footer .footer-col a,
  .pb-guest-footer .footer-col button.pb-menu-button {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ---- the password eye is a real button now (same box as the theme's span) ---------------------------------------- */
.password-wrapper .toggle-password {
  appearance: none;
  border: 0;
  padding: 0;
  line-height: 1;
}
.password-wrapper .toggle-password:focus-visible {
  outline: 2px solid var(--tp-blue);
  outline-offset: 2px;
}

/* link-looking button ("Resend code") */
.pb-link-button {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--tp-blue);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.pb-link-button:hover { text-decoration: underline; }
.pb-link-button:focus-visible { outline: 2px solid var(--tp-blue); outline-offset: 3px; border-radius: 4px; }

/* ---- busy submit on every auth form: the theme styles it for the sign-in page only ------------------------------- */
.pb-auth button[type="submit"].is-busy,
.page-signup button[type="submit"].is-busy,
.pb-contact-form button[type="submit"].is-busy,
.pb-newsletter button[type="submit"].is-busy {
  pointer-events: none;
  opacity: .9;
}
@media (prefers-reduced-motion: no-preference) {
  .pb-auth button[type="submit"].is-busy::after,
  .page-signup button[type="submit"].is-busy::after,
  .pb-contact-form button[type="submit"].is-busy::after,
  .pb-newsletter button[type="submit"].is-busy::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-inline-start: 8px;
    vertical-align: -2px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pbBusySpin .7s linear infinite;
  }
  @keyframes pbBusySpin { to { transform: rotate(360deg); } }
}

/* ---- captcha slot centred in the card; the honeypot never takes room --------------------------------------------- */
.pb-captcha { display: flex; justify-content: center; margin: 0 0 16px; }

/* ---- Google button as a link ------------------------------------------------------------------------------------- */
a.btn-google-auth { text-decoration: none; }

/* ---- newsletter card (home page): the theme's auth-card language, one row ---------------------------------------- */
.pb-newsletter { padding: 8px 0 56px; }
.pb-newsletter__card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  padding: 22px 26px;
  border: 1px solid var(--tp-300);
  border-radius: var(--r-20);
  background: var(--tp-200);
  box-shadow: 0 18px 45px -30px rgba(15, 23, 42, .28);
}
.pb-newsletter__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--tp-800);
}
.pb-newsletter__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  flex: 1 1 360px;
  max-width: 520px;
}
.pb-newsletter__form .form-control { flex: 1 1 220px; min-width: 0; height: 48px; }
/* The newsletter field is our extra (no reference rule): it takes the reference auth input look (guest.auth sheet,
   `.auth-form .form-control`), so the site has one input style. */
html body .pb-newsletter__form input.form-control {
  border: 1px solid rgba(148, 163, 184, .3);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0)), rgba(248, 251, 255, .82);
  padding: 12px 16px;
  font-size: 14.5px;
  font-weight: 650;
  color: var(--tp-800);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -1px 0 rgba(15, 23, 42, .04), 0 10px 26px rgba(15, 23, 42, .06);
}
html body .pb-newsletter__form input.form-control:focus {
  border-color: rgba(50, 108, 236, .45);
  box-shadow: 0 0 0 4px rgba(50, 108, 236, .12), 0 10px 26px rgba(15, 23, 42, .06);
  outline: 0;
}
html.dark body .pb-newsletter__form input.form-control {
  border-color: rgba(148, 163, 184, .16);
  background: rgba(15, 23, 42, .6);
  box-shadow: none;
}
.pb-newsletter__form .btn { height: 48px; padding-inline: 22px; }
.pb-newsletter__msg { flex: 0 0 100%; }
.pb-newsletter__msg:empty { display: none; }
.pb-newsletter__msg .alert { padding: 10px 14px; }

/* ---- header: language / currency menus --------------------------------------------------------------------------- */
.unauthorized .user-header-button .curency_btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  height: 40px;
  padding: 0 var(--sp-14, 14px);
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: var(--r-pill, 999px);
  background: rgba(148, 163, 184, .10);
  color: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.unauthorized .user-header-button .curency_btn:hover,
.unauthorized .user-header-button .curency_btn:focus-visible {
  background: rgba(148, 163, 184, .18);
  border-color: rgba(148, 163, 184, .45);
}
.pb-currency-note { display: block; padding: 8px 12px 10px; font-size: 12px; }

/* ---- blog: date line and the two-column row of the list ---------------------------------------------------------- */
.pb-blog-date { margin: 0 0 var(--sp-12); font-size: var(--fs-13); color: var(--tp-800); }
html.dark { color-scheme: dark; }
/* Owner rule 31.10.2026: no grey body text on the site. Notes, empty states and muted lines use the strong text colour. */
html body:not(.authorized) .text-muted,
html body:not(.authorized) .error-hero__suggestions > span,
html body:not(.authorized) .error-link-card__body small,
html body:not(.authorized) .pb-services-error,
html body:not(.authorized) .pb-services-nodesc { color: var(--tp-800); }
.blog-post-wrapper .blog-post-content p:last-child { margin-bottom: 0; }

/* ---- pager ------------------------------------------------------------------------------------------------------- */
.pb-pager { display: flex; justify-content: center; margin: var(--sp-20) 0; }
.pb-pager .pagination { margin: 0; flex-wrap: wrap; justify-content: center; }
.pb-pager .pagination li.disabled a { cursor: default; }

/* ---- documents: the card keeps clear of the fixed header and the footer ------------------------------------------ */
.unauthorized .card_wrap .pr-doc { margin-top: var(--sp-20); }
/* the document card of a page (terms, privacy, about): the reference theme starts it 142px from the top, 11px lower than this adapter did */
.unauthorized .card_wrap .col-md-12 > .pr-doc { margin-top: var(--sp-32); }
.pb-contact-heading { margin-top: var(--sp-20); }
.pb-contact-form .form-group { margin-bottom: var(--sp-16); }

/* ---- page frame: the footer stays at the bottom of short pages (blog without posts, 404, a short document) -------- */
body.unauthorized {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.unauthorized > main {
  flex: 1 0 auto;
  width: 100%;
}

/* sign-up family: the sheet's `.signup-screen` margin already clears the header, so no extra padding here */
/* Auth cards are centred flex boxes, so the form shrank to its content (204px inputs). It takes the card width again; the input
   look itself is the reference sheet's (guest.auth.min.css, --auth-input-* variables), not overridden here. */
.c-auth-card > *:not(.auth-title):not(.auth-subtitle) { align-self: stretch; width: 100%; }
.c-auth-card .form-group { align-items: stretch; }
.c-auth-card .form-group > .form-control,
.c-auth-card .form-group > .password-wrapper { width: 100%; }

/* ---- blog post page: the title is not a link here (the list wraps it in one), so it needs its own strong colour ---- */
.page-blog-post .blog-post-wrapper > .blog-post-title {
  margin: 0 0 var(--sp-12);
  color: var(--tp-800);
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.2;
}
.page-blog-post .blog-post-content a { color: var(--tp-blue); }
.page-blog-post .blog-post-content ul,
.page-blog-post .blog-post-content ol { padding-left: 1.4em; }
.page-blog-post .blog-post-content ul { list-style: disc; }
.page-blog-post .blog-post-content img { max-width: 100%; height: auto; }

/* narrow header: below 576px the currency menu gives way and the language button keeps its globe, so the theme switch stays on screen */
@media (max-width: 575px) {
  html body:not(.authorized) .user-header .row .user-header-button .pb-guest-menu--currency { display: none; }
  html body:not(.authorized) .user-header .row .user-header-button .pb-guest-menu--language .language-list_btn { padding: 0 10px; gap: 4px; }
  html body:not(.authorized) .user-header .row .user-header-button .pb-guest-menu--language .language-list_btn > span > span:last-child { display: none; }
  html body:not(.authorized) .user-header .row .user-header-left { min-width: 0; max-width: 100%; }
  html body:not(.authorized) .user-header .row .user-header-left a { display: block; min-width: 0; }
  /* inline padding keeps the glyph overhang of the logo text from being clipped */
  html body:not(.authorized) .user-header .row .user-header-left .user-header-logo { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline: .15em; }
}
@media (min-width: 360px) and (max-width: 575px) {
  html body:not(.authorized) .user-header .row .col-md-12 { grid-template-columns: minmax(0, 1fr) auto; }
  html body:not(.authorized) .user-header .row .user-header-button { flex-wrap: nowrap; }
}

/* ============================================================
   404 PAGE (ported from the owner's standalone error sheet; it renders inside the guest layout here)
   Scope: .pr-404
   ============================================================ */

.pr-404 {
  position: relative;
  min-height: calc(100vh - 100px);
  padding: 24px 16px 40px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font);
  color: #18243b;
  /* No wrapper background of its own (it was a second gradient that showed the page grid only as thin strips above and below the
     card, which read as a seam): the page background of the visitor shell continues behind the card. */
  background: transparent;
}
html.dark .pr-404 {
  color: rgba(248, 250, 252, .94);
}


.pr-404 .page-content,
.pr-404 .page-container,
.pr-404 .container-fluid,
.pr-404 .row,
.pr-404 .col-md-12 {
  width: 100%;
  position: relative;
  z-index: 1;
}

.pr-404 .row,
.pr-404 .col-md-12 {
  display: flex;
  justify-content: center;
}

/* Bootstrap's .row keeps its -15px side margins under width:100%, which pushed the card 15px left of centre. */
.pr-404 .row {
  margin-inline: 0;
}

.pr-404 .error-hero {
  position: relative;
  margin: 0 auto;
  padding: 44px clamp(20px, 4vw, 56px) 40px;
  width: 100%;
  max-width: 1080px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, .18);
  background:
    radial-gradient(circle at top left, rgba(58, 128, 243, .12), transparent 36%),
    radial-gradient(circle at 90% 12%, rgba(58, 128, 243, .10), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .94));
  box-shadow:
    0 12px 30px rgba(15, 23, 42, .07),
    inset 0 1px 0 rgba(255, 255, 255, .8);
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;
}
html.dark .pr-404 .error-hero {
  border-color: rgba(51, 65, 85, .58);
  background:
    radial-gradient(circle at top left, rgba(58, 128, 243, .14), transparent 36%),
    radial-gradient(circle at 90% 12%, rgba(58, 128, 243, .12), transparent 30%),
    linear-gradient(180deg, rgba(15, 23, 42, .96), rgba(11, 17, 32, .96));
  box-shadow:
    0 40px 100px rgba(2, 6, 23, .58),
    inset 0 1px 0 rgba(255, 255, 255, .04);
}

.pr-404 .error-hero__glow {
  position: absolute;
  inset: -20% -10%;
  pointer-events: none;
  background:
    radial-gradient(circle at 24% 30%, rgba(58, 128, 243, .22), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(58, 128, 243, .18), transparent 42%);
  filter: blur(40px);
  opacity: .9;
  z-index: -1;
  animation: error404Glow 14s ease-in-out infinite alternate;
}

@keyframes error404Glow {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(20px, -10px, 0) scale(1.04); }
  100% { transform: translate3d(-14px, 12px, 0) scale(.98); }
}

.pr-404 .error-hero__content {
  position: relative;
  display: grid;
  gap: 22px;
  text-align: center;
  z-index: 1;
}

.pr-404 .error-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(58, 128, 243, .22);
  /* tint lightened from .12/.08: the darker pill pulled the label to
     4.45:1, just under the floor. At .07/.05 it measures ~5.9:1. */
  background: linear-gradient(135deg, rgba(58, 128, 243, .07), rgba(58, 128, 243, .05));
  /* #3a80f3 measured 3.65:1 on this ground - under the 4.5:1 floor for
     small text. #2563eb is the site button gradient end, so the label
     stays inside the palette, at 5.3:1. */
  color: #2563eb;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}
html.dark .pr-404 .error-hero__eyebrow {
  border-color: rgba(96, 165, 250, .26);
  background: linear-gradient(135deg, rgba(58, 128, 243, .18), rgba(58, 128, 243, .12));
  color: #93c5fd;
}
.pr-404 .error-hero__eyebrow svg { width: 14px; height: 14px; }

.pr-404 .error-hero__code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.2vw, 18px);
  margin: 6px 0 4px;
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
}

.pr-404 .error-digit {
  display: inline-block;
  font-size: clamp(96px, 18vw, 220px);
  background: linear-gradient(135deg, #3a80f3 0%, #326cec 55%, #2563eb 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 18px 32px rgba(58, 128, 243, .18));
  animation: error404Float 5s ease-in-out infinite;
}
html.dark .pr-404 .error-digit {
  background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 50%, #3b82f6 100%);
  -webkit-background-clip: text;
          background-clip: text;
  filter: drop-shadow(0 18px 32px rgba(96, 165, 250, .22));
}
.pr-404 .error-digit + .error-orb + .error-digit { animation-delay: -2.5s; }

@keyframes error404Float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.pr-404 .error-orb {
  position: relative;
  width: clamp(120px, 18vw, 200px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pr-404 .error-orb__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px dashed rgba(58, 128, 243, .35);
  animation: error404RingSpin 14s linear infinite;
}
html.dark .pr-404 .error-orb__ring { border-color: rgba(96, 165, 250, .36); }

.pr-404 .error-orb__ring--alt {
  inset: 12%;
  border-style: dotted;
  border-color: rgba(58, 128, 243, .35);
  animation-direction: reverse;
  animation-duration: 10s;
}
html.dark .pr-404 .error-orb__ring--alt { border-color: rgba(96, 165, 250, .38); }

@keyframes error404RingSpin { to { transform: rotate(360deg); } }

.pr-404 .error-orb__core {
  position: relative;
  width: 58%;
  height: 58%;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 60%),
    linear-gradient(135deg, #3a80f3, #326cec 55%, #2563eb);
  color: #fff;
  box-shadow:
    0 18px 40px rgba(58, 128, 243, .38),
    0 0 0 1px rgba(255, 255, 255, .3),
    inset 0 1px 0 rgba(255, 255, 255, .42);
  animation: error404OrbPulse 3.6s ease-in-out infinite;
}
.pr-404 .error-orb__core::before {
  content: "";
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(58, 128, 243, .35), transparent 70%);
  filter: blur(14px);
  z-index: -1;
}
.pr-404 .error-orb__core svg { width: 50%; height: 50%; }

@keyframes error404OrbPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

.pr-404 .error-orb__sparkle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, transparent 70%);
  box-shadow: 0 0 12px rgba(255, 255, 255, .9);
  animation: error404SparkleTwinkle 2.4s ease-in-out infinite;
}
.pr-404 .error-orb__sparkle--1 { top: 12%; right: 10%; animation-delay: 0s; }
.pr-404 .error-orb__sparkle--2 { bottom: 14%; left: 6%; animation-delay: -1s; width: 6px; height: 6px; }
.pr-404 .error-orb__sparkle--3 { top: 50%; right: -4%; animation-delay: -1.6s; width: 5px; height: 5px; }

@keyframes error404SparkleTwinkle {
  0%, 100% { opacity: 0; transform: scale(.6); }
  50%      { opacity: 1; transform: scale(1); }
}

.pr-404 .error-hero__title {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--t-text-strong-96-2);
  line-height: 1.18;
}
html.dark .pr-404 .error-hero__title { color: rgba(248, 250, 252, .96); }

.pr-404 .error-hero__text {
  margin: 0 auto;
  max-width: 620px;
  color: rgba(51, 65, 85, .92);
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.65;
  font-weight: 500;
}
html.dark .pr-404 .error-hero__text { color: rgba(203, 213, 225, .82); }

.pr-404 .error-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}

.pr-404 .error-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 16px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, color .18s ease, border-color .18s ease, background .18s ease;
  box-sizing: border-box;
}
.pr-404 .error-cta svg { width: 16px; height: 16px; }

.pr-404 .error-cta--primary {
  color: #fff;
  background: linear-gradient(135deg, #3a80f3 0%, #326cec 55%, #2563eb 100%);
  box-shadow: 0 18px 36px rgba(58, 128, 243, .28);
}
.pr-404 .error-cta--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 44px rgba(58, 128, 243, .34);
  filter: saturate(1.06);
  color: #fff;
}

.pr-404 .error-cta--secondary {
  color: #18243b;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(241, 245, 249, .92));
  border-color: rgba(148, 163, 184, .26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .86),
    0 12px 24px rgba(15, 23, 42, .06);
}
html.dark .pr-404 .error-cta--secondary {
  color: rgba(248, 250, 252, .94);
  background: linear-gradient(180deg, rgba(30, 41, 59, .94), rgba(15, 23, 42, .94));
  border-color: rgba(51, 65, 85, .68);
}
.pr-404 .error-cta--secondary:hover {
  transform: translateY(-2px);
  border-color: rgba(58, 128, 243, .42);
  color: #2563eb;
}

.pr-404 .error-cta--ghost {
  color: #475569;
  background: transparent;
  border-color: rgba(148, 163, 184, .28);
}
html.dark .pr-404 .error-cta--ghost {
  color: rgba(203, 213, 225, .82);
  border-color: rgba(51, 65, 85, .68);
}
.pr-404 .error-cta--ghost:hover {
  transform: translateY(-2px);
  color: #2563eb;
  border-color: rgba(58, 128, 243, .42);
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(241, 245, 249, .82));
}

.pr-404 .error-hero__suggestions {
  position: relative;
  z-index: 1;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px dashed rgba(148, 163, 184, .26);
}
html.dark .pr-404 .error-hero__suggestions { border-top-color: rgba(51, 65, 85, .58); }

.pr-404 .error-hero__suggestions-label {
  display: block;
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-align: center;
  color: #64748b;
}
html.dark .pr-404 .error-hero__suggestions-label { color: rgba(148, 163, 184, .82); }

.pr-404 .error-hero__suggestions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.pr-404 .error-link-card {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, .18);
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 250, 252, .88));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .82),
    0 10px 24px rgba(15, 23, 42, .05);
  color: #18243b;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
html.dark .pr-404 .error-link-card {
  background: linear-gradient(180deg, rgba(15, 23, 42, .94), rgba(17, 24, 39, .9));
  border-color: rgba(51, 65, 85, .58);
  color: rgba(248, 250, 252, .94);
}
.pr-404 .error-link-card:hover {
  transform: translateY(-2px);
  border-color: rgba(58, 128, 243, .32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 18px 38px rgba(37, 99, 235, .12);
  color: #18243b;
}
html.dark .pr-404 .error-link-card:hover {
  border-color: rgba(96, 165, 250, .38);
  color: rgba(248, 250, 252, .98);
}

.pr-404 .error-link-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(58, 128, 243, .14), rgba(58, 128, 243, .10));
  border: 1px solid rgba(58, 128, 243, .18);
  color: #3a80f3;
  flex: 0 0 44px;
}
html.dark .pr-404 .error-link-card__icon {
  background: linear-gradient(135deg, rgba(58, 128, 243, .22), rgba(58, 128, 243, .14));
  border-color: rgba(96, 165, 250, .28);
  color: #93c5fd;
}
.pr-404 .error-link-card__icon svg { width: 20px; height: 20px; }

.pr-404 .error-link-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pr-404 .error-link-card__body strong {
  font-size: 14px;
  font-weight: 600;
  color: #18243b;
}
html.dark .pr-404 .error-link-card__body strong { color: rgba(248, 250, 252, .96); }
.pr-404 .error-link-card__body small {
  font-size: 11.5px;
  font-weight: 500;
  color: #64748b;
  letter-spacing: .01em;
}
html.dark .pr-404 .error-link-card__body small { color: rgba(148, 163, 184, .82); }

.pr-404 .error-link-card__arrow {
  width: 14px;
  height: 14px;
  color: #94a3b8;
  transition: transform .2s ease, color .2s ease;
}
html.dark .pr-404 .error-link-card__arrow { color: rgba(148, 163, 184, .68); }
.pr-404 .error-link-card:hover .error-link-card__arrow {
  color: #3a80f3;
  transform: translateX(3px);
}

@media (max-width: 640px) {
  .pr-404 { padding: 20px 12px 80px; }
  .pr-404 .error-hero { padding: 32px 18px 28px; border-radius: 18px; }
  .pr-404 .error-hero__code { gap: 4px; }
  .pr-404 .error-orb { width: clamp(96px, 28vw, 140px); }
  .pr-404 .error-cta { width: 100%; min-height: 48px; }
  .pr-404 .error-hero__actions { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .pr-404 .error-hero__glow,
  .pr-404 .error-digit,
  .pr-404 .error-orb__ring,
  .pr-404 .error-orb__core,
  .pr-404 .error-orb__sparkle {
    animation: none;
  }
}


/* dark hover states (the light pill gave 2.6:1 contrast on the dark page) */
html.dark .pr-404 .error-cta--ghost:hover {
  color: #93c5fd;
  border-color: rgba(58, 128, 243, .50);
  background: linear-gradient(180deg, rgba(30, 41, 59, .94), rgba(15, 23, 42, .94));
}

html.dark .pr-404 .error-cta--secondary:hover {
  color: #93c5fd;
  border-color: rgba(58, 128, 243, .50);
}

/* ---- keyboard focus ------------------------------------------------------
   The page shipped with no focus styling at all - the browser default
   measured 0.57px, which is not a visible indicator. WCAG 2.4.7. */
.pr-404 .error-cta:focus-visible,
.pr-404 .error-link-card:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}

html.dark .pr-404 .error-cta:focus-visible,
html.dark .pr-404 .error-link-card:focus-visible {
  outline-color: #93c5fd;
}

/* ar/fa/ur: the 404 page loads no rtl sheet, so its two reading-direction arrows are mirrored here (scale, not transform) */
[dir="rtl"] .pr-404 .error-link-card__arrow,
[dir="rtl"] .pr-404 .error-cta--ghost svg {
  scale: -1 1;
}

/* ---- visual verification fixes (wave 1) ---- */
/* Desktop header: the controls column never gets less than its content needs (Register was cut at 1280px) */
@media (min-width: 992px) {
  html body:not(.authorized) .user-header .row .col-md-12 { grid-template-columns: minmax(150px, 1fr) auto minmax(max-content, 1fr); }
}

/* Form fields of the guest pages are 16px on phones, so iOS does not zoom the page when one is focused (they were 14 - 14.5px). */
@media (max-width: 767.98px) {
  html body:not(.authorized) input.form-control.form-control,
  html body:not(.authorized) select.form-control.form-control,
  html body:not(.authorized) textarea.form-control.form-control { font-size: 16px; }
}

/* 992-1199px: tighter menu entries so the eight items stay on one line */
@media (min-width: 992px) and (max-width: 1199.98px) {
  html body:not(.authorized) .user-header .row .user-header-menu a { padding-inline: 8px; white-space: nowrap; }
  html body:not(.authorized) .user-header .row .col-md-12 { column-gap: 12px; }
}

/* ---- pb3 X4 polish: targets of the visitor pages on a phone (measured 17.10.2026 in Chrome) ---- */
@media only screen and (max-width: 767.98px) {
  html body:not(.authorized) .user-header .row .user-header-left a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* "Show password" of the visitor forms keeps its look, its hit area grows to 44px with a clear ::after (the sheet does the same for the
     theme switch and the account page's toggles) */
  .password-wrapper .toggle-password {
    position: absolute;
  }

  .password-wrapper .toggle-password::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }

  .auth-form .auth-question a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* dark mode: contact card, its fields and the newsletter card take the panel navy instead of neutral greys */
html.dark .page-contact .card,
html.dark .pb-newsletter__card {
  background: var(--td-surface-900-94);
  border-color: var(--td-border-14);
}

html.dark .page-contact .card .form-control,
html.dark .pb-newsletter__form .form-control {
  background-color: color-mix(in srgb, var(--td-surface-900-94) 60%, black);
  border-color: var(--td-border-14);
}

/* ---- pb3 X4 polish: the small grey lines of the error page in the light mode were 4.2:1 (measured 17.10.2026) ---- */
html:not(.dark) .error-hero__suggestions > span,
html:not(.dark) .error-link-card__body small {
  color: var(--tp-600);
}

/* owner rule 31.10.2026: no grey readable text (footer, service rows, bordered buttons) */
html body:not(.authorized) :is(.pr-footer .footer-col a, .pr-footer .footer-col-title, .btn-border, .btn-hero-secondary, .page-services .service-box-left .service-bottom > div:first-child > span, .page-services .service-box-left .service-bottom > div:first-child > span b) { color: var(--tp-800); }