/*
 * Verification page.
 *
 * Colours and type are pulled from Elementor's global design tokens first, so
 * the page follows whatever the site is set to. The hex values after each comma
 * are only fallbacks for when those tokens are not present.
 */
.skr-verify{
  --skr-ink:     var(--e-global-color-primary,   #0E2246);
  --skr-link:    var(--e-global-color-secondary, #1668D9);
  --skr-accent:  var(--e-global-color-accent,    #E8632B);
  --skr-muted:   #5B6E8C;
  --skr-ok:      #1E8A5F;
  --skr-bad:     #C0392B;
  --skr-surface: #ffffff;
  --skr-wash:    #F4F7FC;
  --skr-line:    rgba(14,34,70,.13);
  --skr-radius:  16px;
  --skr-shadow:  0 18px 45px -28px rgba(14,34,70,.55);

  --skr-font-head: var(--e-global-typography-primary-font-family, inherit);
  --skr-font-body: var(--e-global-typography-text-font-family, inherit);

  font-family: var(--skr-font-body);
  color: var(--skr-ink);
  max-width: 720px;
  margin-inline: auto;
  padding: 8px 0 4px;
}
.skr-verify *{box-sizing:border-box}



/* ---------- hide the theme's own page title on the verification page ---------- */
body.skr-hide-page-title .entry-title,
body.skr-hide-page-title .page-title,
body.skr-hide-page-title .post-title,
body.skr-hide-page-title .elementor-page-title,
body.skr-hide-page-title .elementor-heading-title.page-title,
body.skr-hide-page-title .page-header .entry-title,
body.skr-hide-page-title .entry-header .entry-title,
body.skr-hide-page-title header.page-header{
  display:none !important;
}

/* ---------- banner ---------- */
.skr-hero{
  --skr-ink:     var(--e-global-color-primary,   #0E2246);
  --skr-link:    var(--e-global-color-secondary, #1668D9);
  --skr-accent:  var(--e-global-color-accent,    #E8632B);
  --skr-font-head: var(--e-global-typography-primary-font-family, inherit);
  --skr-font-body: var(--e-global-typography-text-font-family, inherit);

  position:relative;
  background:var(--skr-hero-bg, #0C4DA2);
  color:#fff;
  font-family:var(--skr-font-body);
  padding:clamp(46px,7vw,84px) 22px clamp(74px,9vw,104px);
  overflow:hidden;
  isolation:isolate;
}
/* break out of a constrained content column and span the viewport */
.skr-hero--full{
  width:100vw;
  margin-inline:calc(50% - 50vw);
}
.skr-hero::before,
.skr-hero::after{
  content:"";position:absolute;border-radius:50%;z-index:-1;pointer-events:none;
}
.skr-hero::before{
  width:min(46vw,520px);aspect-ratio:1;
  right:-8%;top:-46%;
  background:var(--skr-link);opacity:.34;
}
.skr-hero::after{
  width:min(26vw,260px);aspect-ratio:1;
  right:6%;bottom:-38%;
  background:var(--skr-accent);opacity:.28;
}
.skr-hero__inner{max-width:720px;margin-inline:auto;position:relative}
.skr-hero .skr-hero__eyebrow{
  display:inline-block;margin:0 0 16px;
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;background:color-mix(in srgb, var(--skr-accent) 82%, transparent);
  padding:6px 14px;border-radius:999px;
}
.skr-hero .skr-hero__title{
  font-family:var(--skr-font-head);
  font-size:clamp(2rem,5.2vw,3.2rem);
  line-height:1.08;letter-spacing:-.015em;
  margin:0 0 14px;color:#fff;
}
.skr-hero .skr-hero__text{
  margin:0;max-width:52ch;
  font-size:clamp(1rem,1.6vw,1.14rem);line-height:1.6;
  color:color-mix(in srgb, #fff 76%, transparent);
}
.skr-hero .skr-hero__points{
  list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;
  margin:26px 0 0;padding:0;
  font-size:.86rem;color:color-mix(in srgb, #fff 70%, transparent);
}
.skr-hero .skr-hero__points li{display:flex;align-items:center;gap:9px}
.skr-hero .skr-hero__points li::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--skr-accent);flex:none;
}

/* the search card lifts into the bottom of the banner */
.skr-verify--lifted{
  margin-top:clamp(-64px,-6vw,-44px);
  position:relative;z-index:2;
  padding-inline:22px;
}
.skr-verify--lifted .skr-verify__field{
  box-shadow:0 22px 50px -24px rgba(14,34,70,.6);
}

@media (max-width:600px){
  .skr-hero::before{right:-24%;top:-30%}
  .skr-hero::after{display:none}
  .skr-hero__points{gap:8px 18px;font-size:.8rem}
}

/* ---------- header ---------- */
.skr-verify__head{text-align:center;margin-bottom:26px}
.skr-verify .skr-verify__eyebrow{
  display:inline-block;margin:0 0 12px;
  font-family:var(--skr-font-body);
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--skr-accent);
  background:color-mix(in srgb, var(--skr-accent) 12%, transparent);
  padding:6px 14px;border-radius:999px;
}
.skr-verify .skr-verify__title{
  font-family:var(--skr-font-head);
  font-size:clamp(1.7rem,4vw,2.4rem);
  line-height:1.15;margin:0 0 10px;color:var(--skr-ink);
}
.skr-verify .skr-verify__intro{margin:0 auto;max-width:46ch;color:var(--skr-muted);font-size:1.02rem}

/* ---------- form ---------- */
.skr-verify__form{margin:0 0 8px}
.skr-verify__form{max-width:var(--skr-form-width,760px);margin-inline:auto}
.skr-verify__field{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  background:var(--skr-surface);
  border:1px solid var(--skr-field-border, #D6DBE4);
  border-radius:999px;
  padding:8px 8px 8px 10px;
  box-shadow:none;
}
.skr-verify__field:focus-within{
  border-color:var(--skr-link);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--skr-link) 14%, transparent);
}
.skr-verify .skr-verify__field input[type=text]{
  flex:1 1 240px;min-width:0;
  border:0;background:transparent;outline:none;
  padding:17px 20px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:1.04rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--skr-ink);
}
/* the placeholder reads as a normal sentence; only what is typed goes uppercase */
.skr-verify__field input::placeholder{
  color:var(--skr-placeholder, #8894A8);
  font-family:inherit;letter-spacing:0;text-transform:none;
}
.skr-verify .skr-verify__btn{
  flex:0 0 auto;cursor:pointer;border:0;
  font-family:var(--skr-font-body);
  font-size:1.04rem;font-weight:600;
  padding:17px 42px;border-radius:999px;
  background:var(--skr-btn-bg, #FA7942);color:#fff;
  transition:background .18s ease, transform .12s ease;
}
.skr-verify .skr-verify__btn:hover{background:var(--skr-btn-hover, #E8662E)}
.skr-verify__btn:active{transform:translateY(1px)}
.skr-verify__btn:focus-visible{outline:3px solid var(--skr-accent);outline-offset:2px}
.skr-verify .skr-verify__help{margin:18px 4px 0;font-size:.86rem;color:var(--skr-help, #5B6E8C);text-align:center}

/* ---------- result ---------- */
.skr-card{
  margin-top:28px;
  background:var(--skr-surface);
  border:1px solid var(--skr-line);
  border-radius:var(--skr-radius);
  padding:28px 30px 30px;
  box-shadow:var(--skr-shadow);
  position:relative;overflow:hidden;
}
.skr-card::before{content:"";position:absolute;inset:0 0 auto 0;height:5px}
.skr-card--valid::before{background:var(--skr-ok)}
.skr-card--bad::before{background:var(--skr-bad)}

.skr-card__top{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:20px}
.skr-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:7px 14px 7px 10px;border-radius:999px;
}
.skr-badge svg{width:15px;height:15px;flex:none}
.skr-badge--ok{background:color-mix(in srgb, var(--skr-ok) 13%, transparent);color:var(--skr-ok)}
.skr-badge--bad{background:color-mix(in srgb, var(--skr-bad) 12%, transparent);color:var(--skr-bad)}
.skr-card .skr-card__code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.82rem;letter-spacing:.12em;color:var(--skr-muted);
  background:var(--skr-wash);padding:6px 12px;border-radius:8px;
}

.skr-card .skr-card__lead{margin:0 0 4px;font-size:.92rem;color:var(--skr-muted)}
.skr-card .skr-card__name{
  font-family:var(--skr-font-head);
  font-size:clamp(1.5rem,3.4vw,2.1rem);
  line-height:1.2;margin:0 0 22px;color:var(--skr-ink);
}

.skr-facts{display:grid;gap:0;margin:0}
.skr-facts__row{
  display:flex;flex-wrap:wrap;gap:4px 20px;
  padding:13px 0;border-top:1px solid var(--skr-line);
}
.skr-facts__row:first-child{border-top:0;padding-top:0}
.skr-card .skr-facts dt{
  flex:0 0 140px;margin:0;
  font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--skr-muted);padding-top:3px;
}
.skr-card .skr-facts dd{margin:0;flex:1 1 220px;font-size:1.02rem;color:var(--skr-ink)}

.skr-card__image{display:block;margin-top:24px;text-decoration:none;position:relative}
.skr-card__image img{
  display:block;width:100%;height:auto;
  border:1px solid var(--skr-line);border-radius:10px;
}
.skr-card__imagenote{
  display:inline-block;margin-top:10px;
  font-size:.82rem;font-weight:600;color:var(--skr-link);
}
.skr-card__image:hover .skr-card__imagenote{text-decoration:underline}

.skr-card .skr-card__message{margin:0 0 10px;font-size:1.06rem;font-weight:600;color:var(--skr-ink)}
.skr-card .skr-card__help{margin:0;font-size:.92rem;color:var(--skr-muted);max-width:52ch}

.skr-verify .skr-verify .skr-verify__foot{
  margin-top:26px;padding-top:18px;
  border-top:1px solid var(--skr-line);
  font-size:.86rem;color:var(--skr-help, #5B6E8C);text-align:center;
}

@media (max-width:600px){
  .skr-verify__field{border-radius:14px;padding:8px}
  .skr-verify__field input[type=text]{flex:1 1 100%;text-align:center;padding:13px 10px}
  .skr-verify__btn{flex:1 1 100%;padding:14px}
  .skr-card{padding:22px 20px 24px}
  .skr-facts dt{flex:1 1 100%}
}

@media (prefers-reduced-motion:reduce){
  .skr-verify *{transition:none!important}
}


/* ---------- banner: split layout (text left, pills right) ---------- */
.skr-hero__copy{min-width:0}
.skr-hero--split .skr-hero__inner{
  max-width:1180px;
  display:grid;
  /* two columns only: the copy block, then the pills */
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(28px,5vw,70px);
  align-items:center;
}
.skr-hero--split .skr-hero__copy{grid-column:1}
.skr-hero--split .skr-hero__points{grid-column:2}
.skr-hero--split .skr-hero__eyebrow{
  background:none;padding:0;border-radius:0;
  color:var(--skr-accent);
  letter-spacing:.22em;margin-bottom:12px;
}
.skr-hero--split .skr-hero__title{
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.02em;
  margin-bottom:18px;
}
.skr-hero--split .skr-hero__text{max-width:44ch}

.skr-hero--split .skr-hero__points{
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  margin:0;
}
.skr-hero--split .skr-hero__points li{
  background:var(--skr-pill-bg, #fff);
  color:var(--skr-pill-text, #0E2246);
  padding:11px 20px;
  border-radius:999px;
  font-size:.92rem;
  font-weight:500;
  line-height:1.35;
  box-shadow:0 10px 24px -16px rgba(0,0,0,.55);
}
.skr-hero--split .skr-hero__points li::before{
  background:var(--skr-pill-dot, #0E2246);
  width:6px;height:6px;
}

@media (max-width:880px){
  .skr-hero--split .skr-hero__inner{grid-template-columns:1fr;gap:28px}
  .skr-hero--split .skr-hero__copy,
  .skr-hero--split .skr-hero__points{grid-column:1}
  .skr-hero--split .skr-hero__points{align-items:flex-start}
}

/* circles can be switched off from the Elementor widget */
.skr-hero--nocircles::before,
.skr-hero--nocircles::after{display:none}

/* banner text alignment */
.skr-hero--center .skr-hero__inner{text-align:center}
.skr-hero--center .skr-hero__text{margin-inline:auto}
.skr-hero--center .skr-hero__points{justify-content:center}