.verification-page {
  background: var(--paper);
}

.verification-page .site-header {
  background: rgb(245 243 240 / 90%);
  border-bottom-color: rgb(16 17 22 / 8%);
}

.verification-hero {
  position: relative;
  min-height: min(900px, 100svh);
  padding: calc(var(--header-height) + 58px) 0 72px;
  overflow: hidden;
  display: grid;
  align-items: center;
  isolation: isolate;
  background:
    radial-gradient(circle at 82% 20%, rgb(96 81 167 / 20%), transparent 27%),
    radial-gradient(circle at 60% 105%, rgb(59 128 128 / 12%), transparent 32%),
    linear-gradient(132deg, #faf8f5 0 51%, #e5e3ea 100%);
}

.verification-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .16;
  background: url("../images/molecular-cta-v2.png") 72% center / cover no-repeat;
  mix-blend-mode: multiply;
}

.verification-rings,
.verification-rings::before,
.verification-rings::after {
  position: absolute;
  z-index: -1;
  border: 1px solid rgb(96 81 167 / 16%);
  border-radius: 50%;
  pointer-events: none;
}

.verification-rings {
  top: 16%;
  right: -210px;
  width: 620px;
  aspect-ratio: 1;
}

.verification-rings::before,
.verification-rings::after {
  content: "";
  inset: 14%;
}

.verification-rings::after {
  inset: 31%;
  background: rgb(255 255 255 / 12%);
}

.verification-hero-grid {
  display: grid;
  gap: 45px;
}

.verification-intro {
  min-width: 0;
  max-width: 690px;
}

.verification-intro h1 {
  max-width: 780px;
  margin-bottom: 25px;
  font-size: clamp(3rem, 14vw, 7.5rem);
}

.verification-lead {
  max-width: 530px;
  margin-bottom: 30px;
  color: #46474e;
  font-size: clamp(.86rem, 1.4vw, 1rem);
}

.verification-assurance {
  width: fit-content;
  padding: 12px 17px 12px 12px;
  border: 1px solid rgb(16 17 22 / 12%);
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgb(255 255 255 / 44%);
  backdrop-filter: blur(12px);
}

.verification-assurance > span {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
  background: var(--violet-dark);
  font-family: var(--font-display);
  font-size: 1.35rem;
}

.verification-assurance p {
  margin: 0;
  display: grid;
  line-height: 1.3;
}

.verification-assurance strong {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .09em;
}

.verification-assurance small {
  color: #65666c;
  font-size: .55rem;
}

.verification-panel {
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  padding: 27px 20px 24px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 88%);
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 89%), rgb(249 248 250 / 72%));
  box-shadow:
    0 42px 100px rgb(33 31 45 / 17%),
    inset 0 1px 0 rgb(255 255 255 / 90%);
  backdrop-filter: blur(30px) saturate(125%);
}

.verification-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--violet-dark), #8878bd 54%, var(--teal));
}

.verification-panel-heading {
  margin-bottom: 19px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.verification-panel-heading .eyebrow {
  margin-bottom: 5px;
}

.verification-panel-heading h2 {
  margin: 0;
  font-size: clamp(2.45rem, 8vw, 3.6rem);
}

.verification-mark {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border: 1px solid rgb(16 17 22 / 14%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--violet-dark);
  background: linear-gradient(145deg, white, #eeebf5);
  box-shadow: 0 10px 26px rgb(68 52 118 / 13%);
  font-family: var(--font-display);
  font-size: 1.65rem;
}

.verification-protocol {
  margin-bottom: 25px;
  padding: 10px 12px;
  border: 1px solid rgb(24 24 31 / 9%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #55565d;
  background: rgb(245 243 248 / 69%);
  font-size: .52rem;
  font-weight: 600;
  letter-spacing: .025em;
}

.verification-protocol-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #2f8b6a;
  box-shadow: 0 0 0 4px rgb(47 139 106 / 11%);
}

.verification-protocol-id {
  margin-left: auto;
  color: #77747f;
  font-size: .45rem;
  letter-spacing: .14em;
}

.server-notice {
  margin-bottom: 18px;
  padding: 13px 15px;
  border: 1px solid #d4a162;
  border-left-width: 3px;
  background: #fff8ec;
  color: #5d4126;
}

.server-notice strong {
  display: block;
  margin-bottom: 3px;
  font-size: .63rem;
}

.server-notice p {
  margin: 0;
  font-size: .58rem;
}

.verification-form label {
  display: block;
  margin-bottom: 8px;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.verification-field-row {
  display: grid;
  gap: 9px;
}

.verification-field-row input {
  width: 100%;
  min-width: 0;
  min-height: 66px;
  padding: 0 20px;
  border: 1px solid #aaa8b0;
  border-radius: 12px;
  color: var(--ink);
  background: rgb(255 255 255 / 74%);
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .21em;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.verification-field-row input::placeholder {
  color: #898990;
  letter-spacing: .08em;
}

.verification-field-row input:hover {
  border-color: #79787f;
  background: white;
}

.verification-field-row input:focus {
  border-color: var(--violet);
  outline: 0;
  box-shadow: 0 0 0 4px rgb(96 81 167 / 12%);
  background: white;
}

.verification-field-row input[aria-invalid="true"] {
  border-color: #a33f45;
  box-shadow: 0 0 0 4px rgb(163 63 69 / 10%);
}

.verification-submit {
  position: relative;
  min-height: 62px;
  padding: 0 23px;
  border: 1px solid var(--ink);
  border-radius: 12px;
  display: inline-grid;
  place-items: center;
  color: white;
  background: linear-gradient(135deg, var(--ink), #282332 58%, var(--violet-dark));
  box-shadow: 0 12px 28px rgb(29 24 42 / 18%);
  font-size: .68rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
}

.verification-submit:hover:not(:disabled) {
  border-color: var(--violet-dark);
  background: var(--violet-dark);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgb(58 43 105 / 24%);
}

.verification-submit:disabled {
  cursor: wait;
  opacity: .72;
}

.verification-spinner {
  position: absolute;
  width: 19px;
  height: 19px;
  border: 2px solid rgb(255 255 255 / 30%);
  border-top-color: white;
  border-radius: 50%;
  visibility: hidden;
  animation: verification-spin .75s linear infinite;
}

.verification-form.is-loading [data-submit-label] {
  visibility: hidden;
}

.verification-form.is-loading .verification-spinner {
  visibility: visible;
}

@keyframes verification-spin {
  to { transform: rotate(360deg); }
}

.verification-hint,
.verification-error {
  margin: 8px 0 0;
  font-size: .55rem;
}

.verification-hint {
  color: #6a6b71;
}

.verification-error {
  color: #91343a;
  font-weight: 600;
}

body.verification-modal-open {
  overflow: hidden;
}

.verification-result-modal {
  position: fixed;
  z-index: 1200;
  inset: 0;
  padding: clamp(14px, 4vw, 42px);
  overflow-y: auto;
  display: grid;
  place-items: center;
}

.verification-result-modal[hidden] {
  display: none;
}

.verification-result-backdrop {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background:
    radial-gradient(circle at 68% 22%, rgb(96 81 167 / 21%), transparent 34%),
    rgb(9 12 18 / 72%);
  backdrop-filter: blur(16px) saturate(105%);
  cursor: default;
  animation: verification-backdrop-in .24s ease-out both;
}

.verification-result {
  position: relative;
  z-index: 1;
  width: min(100%, 720px);
  max-height: calc(100svh - clamp(28px, 8vw, 84px));
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid var(--result-border, #c8c5c2);
  border-radius: 20px;
  color: var(--result-ink, var(--ink));
  background: var(--result-bg, rgb(255 255 255 / 65%));
  box-shadow: 0 18px 48px rgb(31 28 38 / 10%);
  isolation: isolate;
  animation: verification-result-in .3s cubic-bezier(.2, .8, .2, 1) both;
  scrollbar-width: thin;
}

.verification-result[hidden] {
  display: none;
}

.verification-result.has-product-image {
  width: min(100%, 820px);
}

.verification-result-close {
  position: absolute;
  z-index: 4;
  top: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgb(16 17 22 / 12%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: currentColor;
  background: rgb(255 255 255 / 72%);
  box-shadow: 0 8px 22px rgb(16 17 22 / 9%);
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
}

.verification-result-close:hover {
  border-color: currentColor;
  background: white;
  transform: rotate(4deg) scale(1.04);
}

.verification-result-close:focus-visible {
  outline: 3px solid rgb(96 81 167 / 24%);
  outline-offset: 3px;
}

.verification-result-close svg {
  width: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

@keyframes verification-backdrop-in {
  from { opacity: 0; }
}

@keyframes verification-result-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.975);
  }
}

.verification-result.is-genuine {
  --result-bg: linear-gradient(145deg, #eef9f4, #dcefe7);
  --result-border: #82b7a1;
  --result-ink: #123d30;
  box-shadow: 0 22px 58px rgb(35 105 78 / 17%);
}

.verification-result.is-not-found,
.verification-result.is-invalid {
  --result-bg: #fff2f1;
  --result-border: #d8a4a1;
  --result-ink: #713036;
}

.verification-result.is-error {
  --result-bg: #fff8ec;
  --result-border: #d4a162;
  --result-ink: #654623;
}

.verification-result:focus {
  outline: 3px solid rgb(96 81 167 / 22%);
  outline-offset: 3px;
}

.verification-result-glow {
  position: absolute;
  z-index: -1;
  top: -95px;
  right: -95px;
  width: 240px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(68 156 120 / 22%), transparent 68%);
  pointer-events: none;
}

.verification-result-layout {
  display: grid;
}

.verification-product-visual {
  position: relative;
  min-height: 210px;
  margin: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 45%, rgb(255 255 255 / 88%), transparent 43%),
    linear-gradient(145deg, #d7e9e0, #f4f9f6);
}

.verification-product-visual::after {
  content: "";
  position: absolute;
  inset: auto 12% 9%;
  height: 18px;
  border-radius: 50%;
  background: rgb(23 72 54 / 15%);
  filter: blur(12px);
}

.verification-product-visual[hidden] {
  display: none;
}

.verification-product-visual img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 205px;
  padding: 18px;
  object-fit: contain;
  filter: drop-shadow(0 18px 22px rgb(22 57 44 / 18%));
}

.verification-result-content {
  min-width: 0;
  padding: 29px 64px 27px 27px;
}

.verification-result-heading {
  display: flex;
  align-items: center;
  gap: 13px;
}

.verification-result-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgb(255 255 255 / 42%);
  font-size: 1.05rem;
  font-weight: 700;
}

.verification-result-kicker {
  margin: 0 0 2px;
  font-size: .48rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.verification-result h2 {
  margin: 0;
  font-size: clamp(1.55rem, 5vw, 2.2rem);
  letter-spacing: -.02em;
  line-height: 1.03;
}

.verification-result-message {
  max-width: 440px;
  margin: 14px 0 0;
  font-size: .62rem;
}

.verification-metadata {
  margin: 14px 0 0;
  padding-top: 16px;
  border-top: 1px solid currentColor;
  border-top-color: color-mix(in srgb, currentColor 20%, transparent);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px 18px;
}

.verification-metadata[hidden] {
  display: none;
}

.verification-metadata div {
  min-width: 0;
}

.verification-metadata .is-wide {
  grid-column: 1 / -1;
}

.verification-metadata dt {
  font-size: .46rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: .7;
}

.verification-metadata dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
  font-size: .6rem;
  font-weight: 600;
}

.verification-result-actions {
  margin-top: 21px;
  padding-top: 18px;
  border-top: 1px solid currentColor;
  border-top-color: color-mix(in srgb, currentColor 18%, transparent);
}

.verification-another {
  min-height: 48px;
  color: white;
  border-color: #171820;
  background: #171820;
}

.verification-another:hover {
  color: white;
  border-color: var(--violet-dark);
  background: var(--violet-dark);
}

.verification-disclaimer {
  margin: 19px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgb(16 17 22 / 9%);
  color: #696a70;
  font-size: .53rem;
}

.verification-guide {
  padding: 78px 0 90px;
  border-top: 1px solid var(--line);
  background: #faf9f7;
}

.verification-guide-grid {
  display: grid;
  gap: 45px;
}

.verification-guide-heading {
  max-width: 570px;
}

.verification-guide-heading h2 {
  margin-bottom: 21px;
  font-size: clamp(3rem, 9vw, 5.4rem);
}

.verification-guide-heading > p:last-child {
  max-width: 470px;
  margin: 0;
  color: #5e6066;
  font-size: .72rem;
}

.verification-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.verification-steps li {
  padding: 25px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
}

.verification-step-number {
  color: var(--violet);
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.verification-steps h3 {
  margin: 0 0 7px;
  font-family: var(--font-body);
  font-size: .73rem;
}

.verification-steps p {
  max-width: 630px;
  margin: 0;
  color: #5e6066;
  font-size: .63rem;
}

.verification-step-warning .verification-step-number,
.verification-step-warning h3 {
  color: #8b3a40;
}

.verification-privacy {
  color: white;
  background: #0d1018 url("../images/molecular-cta-v2.png") 62% center / cover no-repeat;
}

.verification-privacy-inner {
  min-height: 330px;
  padding-block: 66px;
  display: grid;
  align-items: center;
  gap: 25px;
}

.verification-lock {
  width: 62px;
  height: 62px;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgb(255 255 255 / 5%);
}

.verification-lock svg {
  width: 25px;
  fill: none;
  stroke: white;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.verification-privacy h2 {
  max-width: 760px;
  margin-bottom: 14px;
  color: white;
  font-size: clamp(2.6rem, 7vw, 4.8rem);
}

.verification-privacy p:not(.eyebrow) {
  max-width: 620px;
  margin: 0;
  color: rgb(255 255 255 / 66%);
  font-size: .68rem;
}

.verification-privacy .button {
  width: fit-content;
  color: white;
  border-color: rgb(255 255 255 / 35%);
}

.verification-privacy .button:hover {
  color: var(--ink);
}

.verification-page .site-footer {
  border-top: 1px solid rgb(255 255 255 / 9%);
}

@media (min-width: 520px) {
  .verification-panel {
    padding: 38px 36px 34px;
  }

  .verification-field-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0;
  }

  .verification-field-row input {
    border-radius: 13px 0 0 13px;
  }

  .verification-submit {
    min-width: 138px;
    border-left: 0;
    border-radius: 0 13px 13px 0;
  }

  .verification-result-content {
    padding: 34px 70px 30px 30px;
  }
}

@media (min-width: 650px) {
  .verification-result.has-product-image .verification-result-layout {
    grid-template-columns: 172px minmax(0, 1fr);
  }

  .verification-result.has-product-image .verification-product-visual {
    min-height: 100%;
  }

  .verification-result.has-product-image .verification-product-visual img {
    height: 100%;
    min-height: 245px;
    padding: 20px 14px;
  }
}

@media (min-width: 800px) {
  .verification-guide-grid {
    grid-template-columns: .78fr 1.22fr;
    align-items: start;
    gap: 80px;
  }

  .verification-privacy-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 28px;
  }
}

@media (min-width: 1060px) {
  .verification-hero {
    padding-block: calc(var(--header-height) + 70px) 90px;
  }

  .verification-hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(430px, .92fr);
    align-items: center;
    gap: clamp(55px, 7vw, 120px);
  }

  .verification-intro h1 {
    font-size: clamp(6.3rem, 8.2vw, 8.2rem);
  }

  .verification-rings {
    top: 8%;
    right: -70px;
    width: 780px;
  }

  .verification-guide {
    padding-block: 110px 120px;
  }

  .verification-steps li {
    padding-block: 31px;
    grid-template-columns: 65px minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .verification-spinner {
    animation-duration: 1.5s !important;
  }

  .verification-result-backdrop,
  .verification-result {
    animation: none !important;
  }
}

@media (max-width: 380px) {
  .verification-protocol-id {
    display: none;
  }
}