/* Perinvo V17 public layer — loaded last. Hero system, floating controls, certificate verification. */

/* Hero: logo in the centre, cards read 01 (left) → 02 (right) → 03 (below). Cards never cover the logo. */
.hero .hero-system{--core:206px;position:relative;height:auto!important;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) var(--core) minmax(0,1fr);grid-template-areas:"one core two" ". three .";column-gap:clamp(14px,2vw,26px);row-gap:22px;align-items:start;justify-items:center;padding:26px 0 8px;isolation:isolate}
.hero .system-orbit{position:absolute;inset:auto;left:50%;top:calc(26px + var(--core) / 2);width:calc(var(--core) * 1.78);height:calc(var(--core) * 1.78);transform:translate(-50%,-50%);z-index:0;pointer-events:none}
.hero .system-core{grid-area:core;position:relative!important;left:auto!important;top:auto!important;transform:rotate(3deg)!important;width:var(--core)!important;height:var(--core)!important;z-index:2}
.hero .system-card{position:relative!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:100%!important;max-width:176px;z-index:3;padding:14px!important;border-radius:18px!important}
.hero a.system-card{text-decoration:none;color:inherit;transition:border-color .2s,box-shadow .2s}
.hero a.system-card:hover{border-color:#7fd6dc;box-shadow:0 18px 40px rgba(3,47,97,.16)}
.hero .system-card.card-one{grid-area:one;justify-self:end;margin-top:10px}
.hero .system-card.card-two{grid-area:two;justify-self:start;margin-top:56px}
.hero .system-card.card-three{grid-area:three;max-width:210px}
.hero .system-card i{width:34px!important;height:34px!important;font-size:12px!important;font-weight:800;letter-spacing:.02em}
.hero .system-card b{font-size:13.5px!important;line-height:1.25;margin-top:10px!important}
.hero .system-card small{display:block;font-size:11px!important;line-height:1.4;margin-top:3px;color:#5d7186}
@media (max-width:1180px){.hero .hero-system{--core:164px;column-gap:12px}}
@media (max-width:1050px){.hero .hero-system{--core:140px}.hero .system-card{padding:12px!important}.hero .system-card b{font-size:12.5px!important}.hero .system-card small{font-size:10.5px!important}}
@media (max-width:900px){.hero .hero-system{--core:176px;max-width:560px;margin:8px auto 0}}
/* Phones: logo on top, three readable cards in reading order below it. */
@media (max-width:560px){
  .hero .hero-system{--core:128px;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"core core core" "one two three";row-gap:18px;column-gap:8px;padding-top:14px}
  .hero .system-orbit{top:calc(14px + var(--core) / 2);width:calc(var(--core) * 1.9);height:calc(var(--core) * 1.9)}
  .hero .system-card,.hero .system-card.card-one,.hero .system-card.card-two,.hero .system-card.card-three{justify-self:stretch;max-width:none;margin:0;padding:11px 9px!important;animation:none!important;text-align:left}
  .hero .system-card b{font-size:12px!important}
  .hero .system-card small{font-size:10.5px!important}
}
@media (max-width:400px){
  .hero .hero-system{grid-template-columns:minmax(0,1fr);grid-template-areas:"core" "one" "two" "three";row-gap:10px}
  .hero .system-card,.hero .system-card.card-one,.hero .system-card.card-two,.hero .system-card.card-three{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:12px;align-items:center;padding:10px 12px!important}
  .hero .system-card i{grid-row:1/3}
  .hero .system-card b{margin-top:0!important;font-size:13px!important}
}
@media (prefers-reduced-motion:reduce){.hero .system-card,.hero .system-orbit{animation:none!important}}

/* Floating controls: below 1280px the vertical share rail would cover content, so it becomes a small
   bottom-left bar; the assistant sits bottom-right; page shortcuts are hidden (header and native scroll remain). */
@media (max-width:1280px){
  .page-tools{display:none!important}
  .share-rail{left:max(12px,env(safe-area-inset-left))!important;right:auto!important;top:auto!important;transform:none!important;bottom:calc(16px + env(safe-area-inset-bottom,0px))!important;flex-direction:row!important;padding:6px 8px!important;width:max-content}
  .share-rail .share-label{display:none}
}
@media (max-width:700px){
  .cookie-banner{bottom:calc(76px + env(safe-area-inset-bottom,0px))!important;z-index:1000}
}
@media (max-width:360px){.share-rail button{width:29px!important;height:29px!important}}
/* Install button stacks above the assistant launcher instead of hiding underneath it. */
.pwa-install{right:max(18px,env(safe-area-inset-right))!important;bottom:calc(84px + env(safe-area-inset-bottom))!important;z-index:949!important;padding:11px 16px!important;font-size:13px!important}
@media (max-width:640px){.pwa-install{right:max(14px,env(safe-area-inset-right))!important;bottom:calc(82px + env(safe-area-inset-bottom))!important}}
html.pa-lock .pwa-install,html.pa-lock .share-rail,html.pa-lock .page-tools,html.pa-lock .cookie-banner{visibility:hidden}

/* Focus visibility on the public site. */
:is(a,button,input,select,textarea,summary):focus-visible{outline:3px solid #19a7b3;outline-offset:2px}

/* Articles: editor alignment classes, image fit controls, video embeds. */
.article-content .align-center{text-align:center}.article-content .align-right{text-align:right}.article-content .align-left{text-align:left}
.article-content figure{margin:28px 0}.article-content figure img{display:block;max-width:100%;height:auto;border-radius:14px;margin:0 auto}
.article-content figure.img-small img{max-width:min(420px,100%)}
.article-cover.v17-fit-contain img{object-fit:contain!important;background:#f3f7f9}
.article-cover.v17-pos-top img{object-position:top}.article-cover.v17-pos-bottom img{object-position:bottom}
.article-embed{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#0f2237}
.article-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.article-content .article-cover{margin:26px 0}

/* Certificate verification */
.v17-verify-form{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;max-width:560px}
.v17-verify-form input{flex:1 1 240px;min-height:50px;border:1px solid #cfdde6;border-radius:12px;padding:0 14px;font-size:16px;letter-spacing:.04em;text-transform:uppercase}
.v17-verify-result{max-width:760px;margin:0 auto;padding:clamp(20px,4vw,36px);border-radius:20px;border:2px solid #e3a33b;background:#fffaf1}
.v17-verify-result.is-valid{border-color:#1b9b6b;background:#f1fbf6}
.v17-verify-result h2{margin:0 0 14px;color:#10283f}
.v17-verify-result dl{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:10px 18px;margin:0}
.v17-verify-result dt{font-weight:700;color:#5b6f82}.v17-verify-result dd{margin:0;color:#10283f;font-weight:600;overflow-wrap:anywhere}
@media (max-width:480px){.v17-verify-result dl{grid-template-columns:1fr}.v17-verify-result dd{margin-bottom:6px}}
.v16-certificate-actions{flex-wrap:wrap;gap:10px}