/* Skysnag English homepage hero: one message and one action (the free domain scan) on the left, the film on the right. Scoped to .sgh. */
.sgh{--sgh-blue:#3B6EFD;--sgh-navy:#09173E;--sgh-ink:#4b5565;--sgh-line:#d7deeb}
.sgh .sgh-grid{position:relative;box-sizing:border-box;width:100%;max-width:1320px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:minmax(0,1fr);gap:44px;align-items:center}
.sgh .sgh-copy{min-width:0;text-align:left}
.sgh .sgh-copy h1{margin:0;font-size:clamp(2.2rem,1.25rem + 3.3vw,3.7rem);line-height:1.05;letter-spacing:-.028em}
.sgh .sgh-copy h1 + p{margin:22px 0 0;max-width:34rem;font-size:1.0625rem;line-height:1.65}
.sgh .sgh-copy h1 + p br{display:none}

/* one action: the free domain scan, in brand blue, straight on the page (no panel), aligned to the headline */
.sgh .sgh-scan{margin:34px 0 0;max-width:34rem;text-align:left}
.sgh .sgh-scan label{display:block;margin:0 0 10px;font-size:.8125rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--sgh-navy)}
.sgh .sgh-row{display:flex;gap:8px;padding:6px;border:1px solid var(--sgh-line);border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(9,23,62,.04),0 8px 24px -12px rgba(9,23,62,.12);transition:border-color .15s,box-shadow .15s}
.sgh .sgh-row:focus-within{border-color:var(--sgh-blue);box-shadow:0 0 0 4px rgba(59,110,253,.14)}
.sgh .sgh-row input{flex:1 1 auto;min-width:0;height:48px;border:0;outline:0;background:transparent;padding:0 12px;font:inherit;font-size:1rem;color:var(--sgh-navy);box-shadow:none}
.sgh .sgh-row input::placeholder{color:#8a93a6}
.sgh .sgh-row button{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;border:0;border-radius:8px;padding:0 22px;background:var(--sgh-blue);color:#fff;font:inherit;font-size:1rem;font-weight:600;letter-spacing:-.01em;cursor:pointer;transition:background .15s,box-shadow .15s}
.sgh .sgh-row button:hover{background:#2E57CB;box-shadow:0 6px 16px rgba(59,110,253,.3)}
.sgh .sgh-row button:focus-visible{outline:2px solid var(--sgh-navy);outline-offset:2px}
.sgh .sgh-row button svg{transition:transform .15s}
.sgh .sgh-row button:hover svg{transform:translateX(3px)}
.sgh .sgh-msg{margin:12px 0 0;font-size:.875rem;line-height:1.5;color:var(--sgh-ink)}
.sgh .sgh-err{display:none;color:#c2263a;font-weight:600}
.sgh .sgh-scan.err .sgh-err{display:block}
.sgh .sgh-scan.err .sgh-note{display:none}
.sgh .sgh-scan.err .sgh-row{border-color:#c2263a;box-shadow:0 0 0 4px rgba(194,38,58,.12)}
.sgh .sgh-alt{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;margin:18px 0 0}
.sgh .sgh-trial,.sgh .sgh-demo,.sgh .sgh-why{display:inline-flex;align-items:center;gap:8px;font-size:.9375rem;font-weight:600;color:var(--sgh-navy);text-decoration:none;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.sgh .sgh-trial:hover,.sgh .sgh-demo:hover,.sgh .sgh-why:hover{color:var(--sgh-blue);border-bottom-color:currentColor}
.sgh .sgh-trial svg,.sgh .sgh-demo svg,.sgh .sgh-why svg{width:16px;height:16px;transition:transform .15s}
.sgh .sgh-trial:hover svg,.sgh .sgh-demo:hover svg,.sgh .sgh-why:hover svg{transform:translateX(3px)}

/* film */
.sgh .sgh-media{min-width:0;width:100%;max-width:720px;margin:0 auto}
:is(.sgh,.sgv) .sgh-film{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#0a1640;box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 40px 80px -30px rgba(9,23,62,.5),0 14px 28px -14px rgba(9,23,62,.28);outline:1px solid rgba(9,23,62,.08);cursor:pointer}
:is(.sgh,.sgv) .sgh-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border:0;margin:0;max-width:none;background:#0a1640}
:is(.sgh,.sgv) .sgh-film::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(4,10,40,.45),transparent 40%);transition:opacity .25s}
:is(.sgh,.sgv) .sgh-play{position:absolute;left:20px;bottom:20px;z-index:2;display:inline-flex;align-items:center;gap:12px;padding:8px 18px 8px 8px;border-radius:999px;background:rgba(255,255,255,.96);color:var(--sgh-navy);text-decoration:none;box-shadow:0 8px 24px rgba(4,10,40,.35);transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s}
:is(.sgh,.sgv) .sgh-film:hover .sgh-play,:is(.sgh,.sgv) .sgh-play:focus-visible{transform:translateY(-2px);box-shadow:0 12px 30px rgba(4,10,40,.45)}
:is(.sgh,.sgv) .sgh-play:focus-visible{outline:3px solid #fff;outline-offset:3px}
:is(.sgh,.sgv) .sgh-pi{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--sgh-blue);color:#fff}
:is(.sgh,.sgv) .sgh-pi svg{margin-left:2px}
:is(.sgh,.sgv) .sgh-pl{display:flex;flex-direction:column;line-height:1.15;text-align:left}
:is(.sgh,.sgv) .sgh-pl b{font-size:.9375rem;font-weight:600}
:is(.sgh,.sgv) .sgh-pl small{font-size:.75rem;color:var(--sgh-ink);margin-top:2px}
:is(.sgh,.sgv) .sgh-film.playing{cursor:auto}
:is(.sgh,.sgv) .sgh-film.playing::after{opacity:0}
:is(.sgh,.sgv) .sgh-film.playing .sgh-play{display:none}
/* end screen: when the full film finishes it returns to its poster with a replay and the page's next step, never a faded last frame */
:is(.sgh,.sgv) .sgh-film{container-type:inline-size}
:is(.sgh,.sgv) .sgh-end{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;box-sizing:border-box;text-align:center;color:#fff;background:#0a1640;overflow:hidden;isolation:isolate;visibility:hidden;opacity:0;transition:opacity .4s ease,visibility 0s linear .4s;cursor:auto}
:is(.sgh,.sgv) .sgh-end::before{content:"";position:absolute;inset:-40px;z-index:-1;background:var(--sgh-poster,none) center/cover no-repeat;filter:blur(24px) saturate(1.15);opacity:.5;transform:scale(1.05)}
:is(.sgh,.sgv) .sgh-end::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 90% at 50% 45%,rgba(10,22,64,.35),rgba(6,14,48,.85))}
:is(.sgh,.sgv) .sgh-film.ended .sgh-end{visibility:visible;opacity:1;transition:opacity .4s ease}
:is(.sgh,.sgv) .sgh-film.ended video{visibility:hidden}
:is(.sgh,.sgv) .sgh-end-t{margin:0;max-width:24ch;font-size:clamp(1.125rem,4.2cqi,1.75rem);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:#fff}
:is(.sgh,.sgv) .sgh-end-b{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}
:is(.sgh,.sgv) .sgh-end a,:is(.sgh,.sgv) .sgh-end button{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0;padding:0 20px;border-radius:999px;font:inherit;font-size:.9375rem;font-weight:600;line-height:1;text-decoration:none;cursor:pointer;transition:transform .2s cubic-bezier(.2,.7,.2,1),background-color .15s,border-color .15s}
:is(.sgh,.sgv) .sgh-end a{background:var(--sgh-blue,#3B6EFD);color:#fff;border:1px solid transparent;box-shadow:0 10px 26px -10px rgba(59,110,253,.7)}
:is(.sgh,.sgv) .sgh-end button{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.45)}
:is(.sgh,.sgv) .sgh-end a:hover,:is(.sgh,.sgv) .sgh-end button:hover{transform:translateY(-1px)}
:is(.sgh,.sgv) .sgh-end button:hover{background:rgba(255,255,255,.16);border-color:#fff}
:is(.sgh,.sgv) .sgh-end a:focus-visible,:is(.sgh,.sgv) .sgh-end button:focus-visible{outline:3px solid #fff;outline-offset:3px}
:is(.sgh,.sgv) .sgh-end-f{display:flex;align-items:stretch;gap:8px;width:min(440px,100%);margin:0;padding:6px;box-sizing:border-box;border-radius:999px;background:rgba(255,255,255,.96);box-shadow:0 18px 40px -16px rgba(0,0,0,.55);transition:box-shadow .15s}
:is(.sgh,.sgv) .sgh-end-f input{flex:1 1 auto;min-width:0;min-height:44px;margin:0;padding:0 8px 0 16px;border:0;border-radius:999px;background:transparent;color:var(--sgh-navy,#09173E);font:inherit;font-size:1rem;box-shadow:none;outline:0}
:is(.sgh,.sgv) .sgh-end-f input::placeholder{color:#7a8496}
:is(.sgh,.sgv) .sgh-end-f:focus-within{box-shadow:0 0 0 3px rgba(59,110,253,.55),0 18px 40px -16px rgba(0,0,0,.55)}
:is(.sgh,.sgv) .sgh-end-f.err{box-shadow:0 0 0 3px #f04438,0 18px 40px -16px rgba(0,0,0,.55)}
:is(.sgh,.sgv) .sgh-end .sgh-end-go{flex:0 0 auto;background:var(--sgh-blue,#3B6EFD);border:1px solid transparent;color:#fff;box-shadow:none}
:is(.sgh,.sgv) .sgh-end .sgh-end-go:hover{background:#2f5fe6;border-color:transparent}
:is(.sgh,.sgv) .sgh-end-to{display:none!important}
.sgh .sgh-scan.cue{animation:sgh-cue 1.8s ease-out}
@keyframes sgh-cue{0%{box-shadow:0 0 0 0 rgba(59,110,253,.55)}25%{box-shadow:0 0 0 10px rgba(59,110,253,.22)}100%{box-shadow:0 0 0 18px rgba(59,110,253,0)}}
.sgh .sgh-scan{border-radius:14px}
@container (max-width:480px){
  :is(.sgh,.sgv) .sgh-end-f{display:none}
  :is(.sgh,.sgv) .sgh-end-to{display:inline-flex!important}
}
@container (max-width:460px){
  :is(.sgh,.sgv) .sgh-end{gap:12px;padding:16px}
  :is(.sgh,.sgv) .sgh-end-b{gap:8px}
  :is(.sgh,.sgv) .sgh-end a,:is(.sgh,.sgv) .sgh-end button{min-height:40px;padding:0 14px;font-size:.875rem}
}
@container (max-width:340px){:is(.sgh,.sgv) .sgh-end-t{display:none}}
@media (prefers-reduced-motion:reduce){:is(.sgh,.sgv) .sgh-end,:is(.sgh,.sgv) .sgh-end *{transition:none!important}}



/* Built for: audience paths as real links, under the hero across both columns */
.sgh .sgh-built{position:relative;box-sizing:border-box;width:100%;max-width:1320px;margin:64px auto 0;padding:0 24px}
.sgh .sgh-built-h{margin:0 0 14px;font-size:.8125rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--sgh-ink)}
.sgh .sgh-why{margin-top:20px}
.sgh .sgh-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.sgh .sgh-card{display:flex;align-items:center;gap:16px;padding:18px 22px;border:1px solid var(--sgh-line);border-radius:14px;background:rgba(255,255,255,.85);text-decoration:none;color:var(--sgh-navy);transition:border-color .15s,box-shadow .2s,transform .2s}
.sgh .sgh-card:hover{border-color:#a9c2f5;box-shadow:0 12px 28px -12px rgba(9,23,62,.18);transform:translateY(-2px)}
.sgh .sgh-card:focus-visible{outline:2px solid var(--sgh-blue);outline-offset:2px}
.sgh .sgh-ci{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#EDF2FF;color:var(--sgh-blue)}
.sgh .sgh-ct{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px;text-align:left}
.sgh .sgh-ct b{font-size:1rem;font-weight:600;letter-spacing:-.01em}
.sgh .sgh-ct span{font-size:.9375rem;color:var(--sgh-ink);line-height:1.4}
.sgh .sgh-ca{flex:0 0 auto;color:var(--sgh-blue);transition:transform .15s}
.sgh .sgh-card:hover .sgh-ca{transform:translateX(3px)}
@media (min-width:768px){.sgh .sgh-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media (min-width:1024px){.sgh .sgh-built{margin-top:80px}}
@media (max-width:480px){.sgh .sgh-built{padding:0 16px;margin-top:48px}}

/* desktop: text and film share one row, vertically centred; the film is the larger column */
@media (min-width:1024px){
  .sgh .sgh-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.18fr);gap:clamp(40px,4.5vw,72px)}
  .sgh .sgh-copy{text-align:left;container-type:inline-size}
  /* headline sized to its column so it always sets on two lines beside the film */
  .sgh .sgh-copy h1{font-size:clamp(2.4rem,9.6cqi,3.7rem)}
  .sgh .sgh-copy h1 + p{margin-left:0}
  .sgh .sgh-scan{margin-left:0}
  .sgh .sgh-media{max-width:none}
}
@media (max-width:480px){
  .sgh .sgh-grid{padding:0 16px;gap:36px}
  .sgh .sgh-row{flex-direction:column}
  .sgh .sgh-row button{width:100%}
  :is(.sgh,.sgv) .sgh-play{left:12px;bottom:12px;padding:6px 14px 6px 6px}
  :is(.sgh,.sgv) .sgh-pi{width:34px;height:34px}
}
@media (prefers-reduced-motion:reduce){.sgh *{transition:none!important}}
/* narrow text column (about 1024px screens): button drops under the field */
@container (max-width:470px){.sgh .sgh-row{flex-direction:column}.sgh .sgh-row button{width:100%}}

/* ---------- /protect/ and /certify/ (English): the product film beside the theme's own hero ---------- */
.sgv{--sgh-blue:#3B6EFD;--sgh-navy:#09173E;--sgh-ink:#4b5565}
.sgv .sgv-row{flex-direction:column;gap:36px}
/* phones and tablets: keep the film clear of the product badge that overlaps the hero's bottom edge */
@media (max-width:1023.98px){.sgv .sgv-row{padding-bottom:56px}}
.sgv .sgv-media{width:100%;max-width:640px;margin:0 auto}
.sgv-dark .sgh-film{outline:1px solid rgba(255,255,255,.14);box-shadow:0 40px 90px -30px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.04)}
@media (min-width:1024px){
  /* centred, like the theme: copy stack, then the film as a wide feature under the buttons.
     The hero grows to fit (it was a fixed 680/780px band) and keeps room for the product badge that overlaps its bottom edge. */
  .sgv{height:auto!important}
  .sgv .sgv-row{display:flex;flex-direction:column;align-items:center;gap:48px;padding-top:clamp(128px,15vh,156px);padding-bottom:168px}
  .sgv .sgv-row>div:first-child h1{margin-bottom:20px}
  .sgv .sgv-row>div:first-child>div{margin-bottom:0}
  .sgv .sgv-media{width:min(880px,100%);max-width:none;margin:0 auto}
}


/* German, French and Spanish headlines run longer: a slightly smaller size keeps the hero balanced beside the film */
@media (min-width:1024px){.sgh:is([data-language=de],[data-language=fr],[data-language=es]) .sgh-copy h1{font-size:clamp(2.2rem,8cqi,3.3rem)}}
@media (max-width:1023.98px){.sgh:is([data-language=de],[data-language=fr],[data-language=es]) .sgh-copy h1{font-size:clamp(2rem,1.2rem + 2.8vw,3rem)}}
.sgh:lang(de) .sgh-copy h1{hyphens:manual}