/* OMERVIA v20 — clarity portal: understand first, then enter the cinematic property. */
.clarity-hero.clarity-portal{
  position:relative!important;
  z-index:3;
  display:block!important;
  width:100%;
  height:175svh!important;
  min-height:0!important;
  margin:0;
  padding:0;
  overflow:visible!important;
  background:#020d0e!important;
  isolation:isolate;
}
.clarity-portal-sticky{
  --portal-left-x:0%;
  --portal-right-x:0%;
  --portal-copy-opacity:1;
  --portal-copy-y:0px;
  --portal-copy-scale:1;
  --portal-preview-scale:1.055;
  --portal-shade-opacity:.58;
  --portal-edge-opacity:1;
  position:sticky;
  top:0;
  width:100%;
  height:100svh;
  min-height:0;
  overflow:hidden;
  isolation:isolate;
  background:#020d0e;
  contain:paint;
}
.clarity-preview{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:#020d0e;
}
.clarity-preview img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center center;
  border:0;
  border-radius:0;
  filter:none!important;
  opacity:1;
  transform:scale(var(--portal-preview-scale));
  transform-origin:50% 50%;
  will-change:transform;
  backface-visibility:hidden;
}
.clarity-preview-shade{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(2,13,14,.34),rgba(2,13,14,.10) 42%,rgba(2,13,14,.22)),
    radial-gradient(circle at 50% 48%,transparent 30%,rgba(2,13,14,.22) 100%);
  opacity:var(--portal-shade-opacity);
  will-change:opacity;
}
.portal-panel{
  position:absolute;
  top:0;
  bottom:0;
  z-index:2;
  width:50.08%;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 38%,rgba(126,228,195,.055),transparent 34%),
    linear-gradient(180deg,#071b1a 0%,#041514 56%,#020d0e 100%);
  will-change:transform;
  backface-visibility:hidden;
}
.portal-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.72;
  background:
    linear-gradient(rgba(245,240,231,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(245,240,231,.022) 1px,transparent 1px);
  background-size:82px 82px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
}
.portal-panel::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:1px;
  opacity:var(--portal-edge-opacity);
  background:linear-gradient(180deg,transparent 4%,rgba(201,169,110,.52) 24%,rgba(126,228,195,.22) 74%,transparent 96%);
  box-shadow:0 0 34px rgba(201,169,110,.12);
}
.portal-panel--left{left:0;transform:translate3d(var(--portal-left-x),0,0)}
.portal-panel--left::after{right:0}
.portal-panel--right{right:0;transform:translate3d(var(--portal-right-x),0,0)}
.portal-panel--right::after{left:0}
.portal-seam{
  position:absolute;
  z-index:3;
  top:9vh;
  bottom:9vh;
  left:50%;
  width:1px;
  transform:translateX(-50%);
  pointer-events:none;
  opacity:var(--portal-edge-opacity);
  background:linear-gradient(180deg,transparent,rgba(201,169,110,.58) 28%,rgba(201,169,110,.28) 72%,transparent);
  box-shadow:0 0 22px rgba(201,169,110,.10);
}
.clarity-portal .clarity-shell{
  position:absolute;
  z-index:4;
  inset:0;
  width:min(88vw,1040px)!important;
  min-height:100%;
  margin:0 auto!important;
  padding:clamp(72px,10vh,108px) 0 clamp(104px,14vh,132px)!important;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  transform:translate3d(0,var(--portal-copy-y),0) scale(var(--portal-copy-scale));
  opacity:var(--portal-copy-opacity);
  will-change:transform,opacity;
  pointer-events:none;
}
.clarity-portal .clarity-brand{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:0;
  color:#f7f1e8;
  font:700 clamp(.92rem,1.05vw,1.08rem)/1.1 ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.24em;
}
.clarity-portal .clarity-brand .brand-mark{width:30px;height:30px;flex:0 0 30px}
.clarity-portal .clarity-kicker{
  margin:clamp(34px,5.3vh,54px) 0 14px!important;
  max-width:44ch;
  color:#91e4cb;
  font:700 clamp(.62rem,.7vw,.72rem)/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.clarity-portal .clarity-title{
  margin:0;
  max-width:12ch!important;
  color:#f7f1e8;
  font:400 clamp(3.7rem,6.4vw,7rem)/.93 Georgia,"Times New Roman",serif!important;
  letter-spacing:-.055em;
  text-wrap:balance;
}
.clarity-portal .clarity-lede{
  max-width:58ch!important;
  margin:clamp(22px,3vh,30px) 0 0!important;
  color:#c2d1cd;
  font-size:clamp(1rem,1.22vw,1.18rem)!important;
  line-height:1.58!important;
  text-wrap:pretty;
}
.clarity-portal .clarity-lede strong{color:#f1f6f4;font-weight:650}
.clarity-portal .clarity-clarifier{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:20px 0 0!important;
  padding:9px 14px;
  border:1px solid rgba(145,228,203,.17);
  border-radius:999px;
  background:rgba(5,26,25,.38);
  color:#8eaaa3;
  font:700 .67rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.clarity-portal .clarity-clarifier::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:#91e4cb;
  box-shadow:0 0 12px rgba(145,228,203,.44);
}
.clarity-portal .clarity-scroll{
  position:absolute!important;
  z-index:5;
  left:50%;
  bottom:clamp(20px,3.6vh,34px)!important;
  width:auto!important;
  min-height:46px;
  margin:0;
  padding:0 6px;
  transform:translateX(-50%);
  display:flex!important;
  align-items:center;
  justify-content:center!important;
  gap:13px;
  color:#a4bbb5;
  font:700 .64rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.15em;
  text-transform:uppercase;
  opacity:var(--portal-copy-opacity);
  pointer-events:auto;
  will-change:opacity,transform;
}
.clarity-portal .clarity-scroll i{
  position:relative;
  width:18px!important;
  height:30px!important;
  border:1px solid rgba(245,240,231,.50);
  border-radius:999px;
  background:transparent!important;
}
.clarity-portal .clarity-scroll i::before{
  content:"";
  position:absolute;
  left:50%;
  top:6px;
  width:2px;
  height:6px;
  border-radius:999px;
  background:#91e4cb;
  transform:translateX(-50%);
  animation:omvPortalWheel 1.55s ease-in-out infinite;
}
.clarity-portal .clarity-scroll i::after{display:none!important}
.clarity-portal .clarity-scroll:hover,.clarity-portal .clarity-scroll:focus-visible{color:#eef6f3}
.clarity-portal .clarity-scroll:focus-visible{outline:2px solid #91e4cb;outline-offset:6px;border-radius:999px}
@keyframes omvPortalWheel{0%,100%{opacity:.25;transform:translate(-50%,0)}50%{opacity:1;transform:translate(-50%,9px)}}
.clarity-portal + .story{margin-top:0!important}

/* Product bridge: the visual tour is explicitly framed as context, never the product. */
.post-story-intro-v10 .eyebrow{letter-spacing:.16em}

@media(max-width:780px){
  .clarity-hero.clarity-portal{height:165svh!important}
  .portal-panel::before{background-size:56px 56px}
  .clarity-portal .clarity-shell{
    width:min(87vw,560px)!important;
    padding:58px 0 92px!important;
  }
  .clarity-portal .clarity-brand{font-size:.88rem;letter-spacing:.20em}
  .clarity-portal .clarity-brand .brand-mark{width:27px;height:27px;flex-basis:27px}
  .clarity-portal .clarity-kicker{margin-top:32px!important;margin-bottom:11px!important;max-width:33ch;font-size:.60rem;line-height:1.5}
  .clarity-portal .clarity-title{max-width:10.8ch!important;font-size:clamp(3rem,13.6vw,4.75rem)!important;line-height:.94!important}
  .clarity-portal .clarity-lede{max-width:36ch!important;margin-top:18px!important;font-size:clamp(.91rem,3.9vw,1.02rem)!important;line-height:1.5!important}
  .clarity-portal .clarity-clarifier{margin-top:16px!important;padding:8px 11px;font-size:.57rem;letter-spacing:.07em}
  .clarity-portal .clarity-scroll{bottom:16px!important;font-size:.56rem;letter-spacing:.12em;white-space:nowrap}
}
@media(max-width:360px){
  .clarity-portal .clarity-shell{width:88vw!important;padding:44px 0 78px!important}
  .clarity-portal .clarity-kicker{margin-top:24px!important}
  .clarity-portal .clarity-title{font-size:clamp(2.65rem,13.2vw,3.65rem)!important}
  .clarity-portal .clarity-lede{font-size:.88rem!important;line-height:1.44!important}
  .clarity-portal .clarity-clarifier{font-size:.53rem}
}
@media(max-height:700px) and (min-width:781px){
  .clarity-portal .clarity-shell{padding:44px 0 74px!important}
  .clarity-portal .clarity-kicker{margin-top:22px!important}
  .clarity-portal .clarity-title{font-size:clamp(3.35rem,6vw,5.6rem)!important}
  .clarity-portal .clarity-lede{margin-top:17px!important;font-size:1rem!important;line-height:1.48!important}
  .clarity-portal .clarity-clarifier{margin-top:13px!important}
}
@media(max-height:640px) and (max-width:780px){
  .clarity-portal .clarity-shell{padding:34px 0 68px!important}
  .clarity-portal .clarity-kicker{margin-top:19px!important;font-size:.54rem}
  .clarity-portal .clarity-title{font-size:clamp(2.45rem,12vw,3.35rem)!important}
  .clarity-portal .clarity-lede{margin-top:13px!important;font-size:.82rem!important;line-height:1.4!important}
  .clarity-portal .clarity-clarifier{margin-top:10px!important;padding:6px 9px;font-size:.50rem}
  .clarity-portal .clarity-scroll{bottom:10px!important;min-height:38px}
}
@media(prefers-reduced-motion:reduce){
  .clarity-hero.clarity-portal{height:100svh!important;min-height:100svh!important;overflow:hidden!important}
  .clarity-portal-sticky{position:relative!important;top:auto!important}
  .clarity-preview{opacity:.24}
  .clarity-preview img{transform:none!important}
  .clarity-preview-shade{opacity:.72!important}
  .portal-panel,.portal-seam{display:none!important}
  .clarity-portal .clarity-shell{opacity:1!important;transform:none!important}
  .clarity-portal .clarity-scroll i::before{animation:none!important;transform:translate(-50%,4px)!important;opacity:.8!important}
}

/* v20.1 — real-browser QA fix: legacy v19 decorative pseudo-elements escaped the viewport. */
.clarity-hero.clarity-portal::before,
.clarity-hero.clarity-portal::after{
  content:none!important;
  display:none!important;
}